อาแจ็กซ์ในจังโก้

Django เป็นเฟรมเวิร์กการพัฒนาเว็บยอดนิยมที่ทำให้ง่ายต่อการสร้างเว็บแอปพลิเคชันคุณภาพสูงและปรับขนาดได้ หนึ่งในคุณสมบัติที่ทำให้ Django โดดเด่นคือความสามารถในการจัดการคำขอแบบอะซิงโครนัสผ่านการใช้ Ajax Ajax ย่อมาจาก Asynchronous JavaScript และ XML และเป็นเทคนิคที่ช่วยให้หน้าเว็บสามารถอัปเดตแบบอะซิงโครนัสโดยไม่ต้องโหลดหน้าซ้ำ ในบล็อกนี้ เราจะมาดูวิธีใช้ Ajax ใน Django

การตั้งค่า Ajax ใน Django หากต้องการใช้ Ajax ใน Django คุณจะต้องเพิ่มไลบรารี JavaScript ที่จำเป็นในโครงการของคุณ มีหลายตัวเลือกสำหรับสิ่งนี้ รวมถึง jQuery, Vanilla JavaScript และ ReactJS สำหรับบล็อกนี้ เราจะใช้ jQuery ซึ่งเป็นไลบรารี JavaScript ที่ได้รับความนิยมและใช้กันอย่างแพร่หลาย

ขั้นแรก คุณจะต้องดาวน์โหลด jQuery และเพิ่มลงในไฟล์คงที่ของโปรเจ็กต์ของคุณ คุณสามารถทำได้โดยการดาวน์โหลด jQuery เวอร์ชันล่าสุดจากเว็บไซต์อย่างเป็นทางการ และเพิ่มลงในไดเร็กทอรีแบบคงที่ของโปรเจ็กต์ของคุณ เมื่อคุณเพิ่ม jQuery ในโครงการของคุณแล้ว คุณสามารถรวมไว้ในเทมเพลต HTML ของคุณโดยใช้โค้ดต่อไปนี้:

<script src="{% static 'jquery.min.js' %}"></script>

โค้ดนี้จะรวมไลบรารี jQuery ไว้ในเทมเพลต HTML ของคุณ ทำให้คุณสามารถใช้ฟีเจอร์ต่างๆ ของไลบรารีนั้นในโค้ด JavaScript ของคุณได้

การใช้ Ajax ใน Django หากต้องการใช้ Ajax ใน Django คุณจะต้องสร้างมุมมองที่จัดการคำขอ Ajax และส่งคืนข้อมูลที่จำเป็น คุณจะต้องสร้างรูปแบบ URL ที่จับคู่คำขอ Ajax กับมุมมองที่ถูกต้อง นี่คือตัวอย่างวิธีการดำเนินการนี้:

👉สร้างมุมมองที่จัดการคำขอ Ajax

from django.http import JsonResponse

def get_data(request):
    data = {'message': 'Hello, World!'}
    return JsonResponse(data)

มุมมองนี้จะส่งคืนการตอบกลับ JSON ที่มีข้อความธรรมดา คุณสามารถแทนที่สิ่งนี้ด้วยข้อมูลหรือตรรกะของคุณเองได้

👉สร้างรูปแบบ URL สำหรับคำขอ Ajax

from django.urls import path
from . import views

urlpatterns = [
    path('ajax/get_data/', views.get_data, name='get_data'),
]

รูปแบบ URL นี้แมปคำขอ Ajax กับมุมมอง get_data

👉เขียนโค้ด Ajax ในเทมเพลต HTML ของคุณ

<button id="ajax-button">Get Data</button>

<div id="ajax-response"></div>

<script>
$(document).ready(function() {
    $('#ajax-button').click(function() {
        $.ajax({
            url: '{% url "get_data" %}',
            success: function(data) {
                $('#ajax-response').text(data.message);
            }
        });
    });
});
</script>

รหัสนี้สร้างปุ่มที่ทริกเกอร์คำขอ Ajax เมื่อคลิก เมธอด $.ajax() ส่งคำขอไปยัง URL ที่ระบุโดยพารามิเตอร์ url และคาดหวังการตอบสนองของ JSON หากคำขอสำเร็จ ฟังก์ชัน success จะถูกเรียกใช้ ซึ่งจะตั้งค่าข้อความของ #ajax-response div เป็นข้อความที่ส่งคืนโดยมุมมอง

👉บทสรุป

ในบล็อกนี้ เราได้สำรวจวิธีใช้ Ajax ใน Django เพื่อจัดการกับคำขอแบบอะซิงโครนัสและอัปเดตหน้าเว็บโดยไม่ต้องโหลดหน้าใหม่ทั้งหมด ด้วยการทำตามขั้นตอนที่อธิบายไว้ข้างต้น คุณจะสามารถเพิ่มฟังก์ชัน Ajax ให้กับโปรเจ็กต์ Django ของคุณได้อย่างง่ายดาย และสร้างเว็บแอปพลิเคชันไดนามิกที่ตอบสนองได้

ขอบคุณที่ติดตามและปรบมือ 😋

มาสัมผัสกัน! ติดตามฉันได้ที่:

›อินสตาแกรม: @rajput_gajanan_07.

›GitHub: @gajanan0707

›Linkedin: กาจานัน ราชปุต