Django tích hợp với JavaScript như thế nào?

Hợp tác backend và frontend có thể không phải là một nhiệm vụ dễ dàng. Ví dụ: trong mã javascript, bạn có thể cần một số URL để xem hoặc biểu tượng cần thiết cho một số tiện ích. Bạn có thể mã hóa nó hoặc khéo léo chuyển dữ liệu cần thiết từ phụ trợ sang giao diện người dùng. Ngoài ra, các yêu cầu AJAX thường muốn các lô dữ liệu ở định dạng JSON. Có một cách để làm cho nó nhanh chóng và sạch sẽ. Trong bài viết này, tôi sẽ trình bày một số ứng dụng và giải pháp Django để hợp tác backend - frontend dễ dàng hơn nhiều

django-javascript-settings

django-javascript-settings là một ứng dụng Django có thể chuyển các biến từ phụ trợ sang JavaScript. Bạn có thể cài đặt nó với

pip cài đặt django-javascript-settings

Tiếp theo, thêm 'javascript_settings' vào INSTALLED_APPS

Trong mẫu HTML chính của bạn thêm

{% load javascript_settings_tags %}
{% javascript_settings %}

Kết quả là chúng ta sẽ nhận được

var configuration = {};

Chúng tôi có một biến "cấu hình" với một mảng trống

Để thêm thứ gì đó vào mảng đó, bạn cần xác định hàm javascript_settings trong url. py của ứng dụng django của bạn. Hàm này phải trả về một từ điển

def javascript_settings[]:
    js_conf = {
        'page_title': 'Home',
    }
    return js_conf

Và điều đó sẽ dẫn đến

var configuration = {"jsdemo": {"page_title": "Home"}};

Tôi đã đặt mã trong ứng dụng "jsdemo" nên tôi nhận được cấu hình['jsdemo']['page_title']

cài đặt django-javascript có thể được sử dụng để chuyển các URL xem [sử dụng chức năng đảo ngược], các url tới đồ họa cần thiết hoặc các mẫu được hiển thị, v.v.

Yêu cầu AJAX

Tạo các yêu cầu AJAX với jQuery rất dễ dàng. Đối với ví dụ này, tôi đã tạo một mẫu trang chính

{% load javascript_settings_tags %}

 

    
    {% javascript_settings %}
    
 
 
    Demo

Trong thư mục "tĩnh" của ứng dụng, tôi đã tạo tập lệnh. js trong đó tôi sẽ viết một số mã jQuery sẽ thực hiện yêu cầu AJAX cho một chế độ xem nhất định

Các quan điểm trông giống như vậy

from django.views.generic import TemplateView, View
from django.http import HttpResponse

class HomeView[TemplateView]:
    template_name = "home.html"

home = HomeView.as_view[]


class AjaxView[View]:
    def get[self, request, **kwargs]:
        return HttpResponse['ok']

ajax_view = AjaxView.as_view[]

Chúng tôi có chế độ xem trang chính và chế độ xem thứ hai cho yêu cầu AJAX. Trong url ứng dụng. py Tôi ánh xạ chế độ xem tới một URL và chuyển nó tới JavaScript

from django.conf.urls import patterns, url
from django.core.urlresolvers import reverse

urlpatterns = patterns['jsdemo.views',
    url[r'^ajax/$', 'ajax_view', name='ajax-view'],
]

def javascript_settings[]:
    js_conf = {
        'ajax_view': reverse['ajax-view'],
    }
    return js_conf

Các url ứng dụng. tệp py phải được thêm vào trong các url chính. tập tin py

url[r'^demo/', include['jsdemo.urls']],

Và yêu cầu AJAX trong tập lệnh. js

________số 8

Điều này bao gồm tất cả các yếu tố. Yêu cầu bây giờ sẽ hoạt động và bạn có thể kiểm tra nó trong Firebug hoặc bảng điều khiển dành cho nhà phát triển trình duyệt khác. Yêu cầu sẽ trả về "ok" từ chế độ xem

Mã đơn giản này tạo một yêu cầu GET. Các yêu cầu POST thường xuyên là cần thiết - như khi một số dữ liệu được gửi. Phần jQuery rất dễ dàng

$[document].ready[function[]{
    $.ajax[{
	url: configuration['jsdemo']['ajax_view'],
	cache: false,
	type: "POST",
	data: {"key": "value"}, 
	success: function[data]{
	}
    }];
}];

Trong "AjaxView", chúng tôi thay đổi "get" thành "post" và tải lại trang. Yêu cầu AJAX không thành công - 403, "Xác minh CSRF không thành công. Yêu cầu bị hủy bỏ. ". Chúng tôi đã thực hiện một yêu cầu POST mà không có mã thông báo csrf [những gì chúng tôi đưa vào biểu mẫu]. Bạn có thể sử dụng csrf_exempt trên chế độ xem nhưng đó không phải là giải pháp tốt nhất cho vấn đề này

Trong tài liệu csrf Django, chúng tôi có thể tìm thấy giải pháp. Chúng tôi phải đặt tiêu đề X-CSRFToken với giá trị cookie csrf. Sử dụng jQuery Cookie sẽ dễ dàng

var configuration = {};

0

Sử dụng beforeSend, chúng tôi có thể đặt mã thông báo X-CSRFToken. gần xong rồi. Nếu trình duyệt của bạn có cookie "csrftoken", yêu cầu sẽ hoạt động, nhưng nếu không có thì yêu cầu vẫn không thành công. Django sẽ không tạo cookie nếu không cần thiết. Để đảm bảo sự tồn tại của cookie, hãy thêm 'django. lượt xem. trang trí. csrf. _EnsureCsrfCookie', tới MIDDLEWARE_CLASSES

Chúng tôi có một yêu cầu AJAX đang hoạt động đầy đủ. Bây giờ là lúc sử dụng JSON để lấy một loạt dữ liệu từ chế độ xem

Chỉ cần nhập mô-đun "json" và sửa đổi chế độ xem thành

var configuration = {};

1

Điều đó sẽ hiệu quả, nhưng chúng ta có thể làm tốt hơn nữa

Django khó chịu

django-annoying là một tập hợp các trình trang trí và trình trợ giúp rút ngắn một số tác vụ phổ biến. Chúng tôi có thể sử dụng trình trang trí ajax_request để cải thiện chế độ xem của mình. Nếu chúng ta sử dụng trình trang trí này trên chế độ xem, nó phải trả về một từ điển. Trình trang trí sẽ mã hóa nó thành JSON và sẽ trả về một JsonResponse [giống như HttpResponse nhưng với kiểu mô phỏng JSON chính xác]

Django hoạt động với JavaScript như thế nào?

JavaScript và Django có thể hoạt động cùng nhau không?

Django có tạo JavaScript không?

Làm cách nào để chuyển dữ liệu từ JavaScript sang Django?