AJAX เป็นวิธีที่ดีที่สุดในการทำงานแบบอะซิงโครนัส การโทรแบบอะซิงโครนัสเป็นสิ่งที่ใช้กันทั่วไปในการสร้างเว็บไซต์ เราจะยกตัวอย่างสั้น ๆ เพื่อเรียนรู้วิธีการใช้ AJAX ใน Django เราจำเป็นต้องใช้ jQuery เพื่อเขียน javascript ให้น้อยลง
นี่คือตัวอย่างการติดต่อซึ่งเป็นตัวอย่างที่ง่ายที่สุดที่ฉันใช้เพื่ออธิบายพื้นฐานของ AJAX และการนำไปใช้ใน Django เราจะทำการร้องขอ POST ในตัวอย่างนี้ ฉันกำลังติดตามตัวอย่างของโพสต์นี้: https://djangopy.org/learn/step-up-guide-to-implement-ajax-in-django
models.py
ก่อนอื่นเรามาสร้างรูปแบบการติดต่อโดยมีรายละเอียดพื้นฐาน
from django.db import models
class Contact(models.Model):
name = models.CharField(max_length = 100)
email = models.EmailField()
message = models.TextField()
timestamp = models.DateTimeField(auto_now_add = True)
def __str__(self):
return self.name
forms.py
สร้างแบบฟอร์มสำหรับโมเดลด้านบน
from django import forms
from .models import Contact
class ContactForm(forms.ModelForm):
class Meta:
model = Contact
exclude = ["timestamp", ]
views.py
มุมมองมีลักษณะคล้ายกับมุมมองสร้างตามฟังก์ชั่นพื้นฐาน แต่แทนที่จะกลับมาพร้อมกับการแสดงผลเรากำลังใช้การตอบสนอง JsonResponse
from django.http import JsonResponse
from .forms import ContactForm
def postContact(request):
if request.method == "POST" and request.is_ajax():
form = ContactForm(request.POST)
form.save()
return JsonResponse({"success":True}, status=200)
return JsonResponse({"success":False}, status=400)
urls.py
มาสร้างเส้นทางของมุมมองด้านบนกัน
from django.contrib import admin
from django.urls import path
from app_1 import views as app1
urlpatterns = [
path('ajax/contact', app1.postContact, name ='contact_submit'),
]
แบบ
การย้ายไปยังส่วนหน้าให้เรนเดอร์ฟอร์มที่สร้างขึ้นเหนือแท็กฟอร์มล้อมรอบพร้อมกับปุ่ม csrf_token และส่ง โปรดทราบว่าเราได้รวมไลบรารี jquery
<form id = "contactForm" method= "POST">{% csrf_token %}
{{ contactForm.as_p }}
<input type="submit" name="contact-submit" class="btn btn-primary" />
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
จาวาสคริ
ตอนนี้เรามาคุยกันเกี่ยวกับส่วนของจาวาสคริปต์ในแบบฟอร์มการส่งเรากำลังขออาแจ็กซ์ประเภท POST รับข้อมูลในแบบฟอร์มและส่งไปยังฝั่งเซิร์ฟเวอร์
$("#contactForm").submit(function(e){
// prevent from normal form behaviour
e.preventDefault();
// serialize the form data
var serializedData = $(this).serialize();
$.ajax({
type : 'POST',
url : "{% url 'contact_submit' %}",
data : serializedData,
success : function(response){
//reset the form after successful submit
$("#contactForm")[0].reset();
},
error : function(response){
console.log(response)
}
});
});
นี่เป็นเพียงตัวอย่างพื้นฐานในการเริ่มต้นกับ AJAX กับ django ถ้าคุณต้องการดำน้ำด้วยตัวอย่างอีกหลายตัวคุณสามารถอ่านบทความนี้: https://djangopy.org/learn/step-up-guide-to- ใช้-อาแจ็กซ์ใน Django