Làm cách nào để kết nối Django với JavaScript?

Hãy tưởng tượng điều này, bạn đã tạo một trang web và máy chủ phụ trợ. Back-end của bạn đang làm gì đó với đầu vào của người dùng, có thể thực hiện lệnh gọi đến cơ sở dữ liệu hoặc một số loại thao tác dữ liệu khác. Bạn làm cách nào để ứng dụng khách phía trước của mình gửi một yêu cầu HTML đến máy chủ phía sau và bạn sẽ nhận và xử lý yêu cầu đến đó trên máy chủ phía sau như thế nào trước khi gửi nó trở lại phía phía trước?

Trong bài viết này, tôi sẽ giúp cung cấp cho bạn ý tưởng tổng thể về cách thức hoạt động của tính năng này, cung cấp cho bạn thông tin về những gì sẽ được yêu cầu. Điều này bao gồm chạm vào đối tượng JSON, yêu cầu AJAX và các chủ đề quan trọng khác

một bản tóm tắt

Tóm lại, cách máy khách giao tiếp với máy chủ thông qua việc sử dụng một yêu cầu HTML. Đây là một yêu cầu được gửi bởi phía khách hàng để lấy một số thông tin hoặc dữ liệu. Các yêu cầu này được gửi đến một điểm cuối được xác định rõ ràng trong máy chủ phụ trợ. Máy chủ nhận được yêu cầu này, thực hiện điều gì đó dựa trên yêu cầu và gửi lại phản hồi HTML. Cần lưu ý rằng cả yêu cầu và phản hồi HTML đều có thể mang dữ liệu

Để liên lạc hoặc gửi dữ liệu giữa máy chủ và máy khách, đặc biệt khi máy chủ và máy khách được viết bằng các ngôn ngữ khác nhau, định dạng dữ liệu được sử dụng phổ biến nhất là JSON. Để gửi một yêu cầu HTML có đính kèm dữ liệu JSON, có một số cách để thực hiện việc này. Để nhận và xử lý bất kỳ dữ liệu JSON nào, thông thường, hầu hết các ngôn ngữ hướng đối tượng cũng sẽ có một gói hoặc thư viện có thể được đặt để nhận và phân tích bất kỳ dữ liệu nào đến

Phân tích cú pháp về cơ bản là đưa đối tượng JSON vào dữ liệu thuận tiện hơn để thao tác trên máy khách hoặc máy chủ

hậu trường

Để xử lý yêu cầu HTML đến từ máy khách, khi đang phát triển, một máy chủ back-end đơn giản có thể lắng nghe các yêu cầu HTML sẽ làm được. Máy chủ phát triển riêng, tích hợp sẵn trong Django là hoàn hảo cho việc này, nhưng khi chuyển sang sản xuất, bạn nên sử dụng máy chủ web độc lập và WSGI để xử lý các yêu cầu HTML của máy khách. Đây có thể là Nginx hoặc Apache cho máy chủ web của bạn hoặc gunicorn hoặc kỳ lân cho WSGI trong số nhiều thứ khác

Trong quá trình sản xuất, trước tiên, một yêu cầu đến sẽ bị máy chủ web chặn, chuyển tiếp đến WSGI và sau đó được chuyển đến các url. py nơi các điểm cuối được xác định. Từ đó, yêu cầu được gửi đến vị trí thích hợp của họ để xử lý

giao diện người dùng

Với suy nghĩ này, chúng tôi tiếp tục thiết lập giao diện người dùng để thực hiện các yêu cầu HTML. Để tạo yêu cầu, điều này có thể được thực hiện theo một trong ba cách, bằng cách thực hiện lệnh gọi tìm nạp, yêu cầu AJAX với JQuery hoặc lệnh gọi với Axios. Cũng có thể giao tiếp với back-end của bạn bằng kết nối websocket được nâng cấp, nhưng điều này sẽ không được khám phá trong bài viết này

Lý do bạn có thể chọn cái này dựa trên yêu cầu của bạn. Ví dụ: ai đó có thể chọn thực hiện yêu cầu tìm nạp nếu chỉ cần một yêu cầu HTML đơn giản là đủ mà không cần phải xác thực yêu cầu. Ngoài ra, tìm nạp là một phần của thư viện gốc so với tùy chọn tiếp theo, vì vậy không cần phải cài đặt bất cứ thứ gì dưới dạng phụ thuộc. Tuy nhiên, một điều cần lưu ý về tìm nạp là nếu có bất kỳ dữ liệu nào bạn muốn đính kèm vào yêu cầu, bạn sẽ cần sử dụng một phương thức gốc khác, chẳng hạn như JSON. stringify để biến dữ liệu thành JSON trước khi bạn có thể gửi đi

Ai đó có thể thích thực hiện một yêu cầu AJAX hơn nếu họ muốn sử dụng thư viện JQuery cho các tính năng thao tác DOM của nó. Mặc dù nó đang trở nên lỗi thời nhưng nhiều trang web cũ vẫn sử dụng công cụ này, vì vậy đây vẫn là một công cụ tốt để biết

Cuối cùng, Axios là một công cụ rất tốt để giảm số lượng mã soạn sẵn mà bạn cần để thực hiện một yêu cầu API đơn giản. Ngoài ra, Axios tự động chuyển đổi yêu cầu của bạn thành JSON và cũng xử lý lỗi tốt hơn so với tìm nạp. Đây là lý do tại sao đây là công cụ được đề xuất của tôi để thực hiện các yêu cầu HTTP. Vì lý do này, chúng tôi sẽ sử dụng Axios trong phần trình diễn

giao diện người dùng

Bây giờ vào việc gửi một số dữ liệu. Đối với ví dụ này, tôi sẽ sử dụng Axios để thực hiện yêu cầu và cho bạn thấy nó trông như thế nào trên giao diện người dùng để nhận và xử lý yêu cầu

Đầu tiên, vì chúng tôi đang sử dụng Django trên back-end của mình, hãy đảm bảo bao gồm

{% load static %}

ở đầu chỉ mục của bạn. html nếu không thì máy chủ của chúng tôi sẽ không tải JavaScript của chúng tôi

Vì Axios không được tích hợp sẵn nên chúng tôi cần nhập tập lệnh vào chỉ mục. tệp html

In between the tag, at the top, make sure to add the following:

Then import your JavaScript file as normal. Best practice is having the

Chuyển sang chỉ mục của chúng tôi. js, khi chúng ta đã cài đặt Axios, bây giờ chúng ta có thể gọi nó bằng axios để sử dụng các tính năng của nó. Chúng tôi sẽ thực hiện một yêu cầu đơn giản tới điểm cuối /request. Đừng lo lắng về vị trí /request điểm cuối hiện tại trên máy chủ. Chúng tôi sẽ mô tả nó sau

Hiện tại, hãy nhập thông tin sau vào chỉ mục của bạn. tập tin js

const getRequest = async () => {const response = await axios.get(‘/request’, {params: {“test”: “this is a test”}})console.log(response.data)}getRequest();

Như bạn thấy ở trên, chúng tôi đang gửi các tham số sẽ được chọn ở phía máy chủ. Các thông số này sẽ được đặt trong đối tượng QueryDict và tiếp theo tôi sẽ chỉ cho bạn cách hiển thị dữ liệu này

Khi yêu cầu GET đã được phản hồi, chúng tôi sẽ điều khiển ghi nhật ký dữ liệu phản hồi quay lại

Bây giờ với điều này được thực hiện, chúng ta có thể chuyển sang back-end của mình

hậu trường

Từ bây giờ, chúng tôi sẽ cần thiết lập các url của mình. py và lượt xem. py để xử lý yêu cầu đến. Đảm bảo rằng các url của bạn. py được thiết lập để xử lý yêu cầu đến và định tuyến đến vị trí thích hợp. Ví dụ: trong các url chính của tôi. py, tôi đã viết nó như thế này

from django.urls import path, includefrom myapp import viewsurlpatterns = [path(“”, views.index),path(“request”, views.request)]

Tại đây, bạn có thể thấy rằng tất cả lệnh gọi đến điểm cuối /request sẽ được định tuyến lại đến myapp/views và chuyển đến nơi chúng tôi đã xác định request()

Ở đây bạn có thể thấy nơi yêu cầu đang được xác định

from django.shortcuts import renderfrom django.http import JsonResponsedef index(request):return render(request, “index.html”)def request(request):print(request.GET.get(“test”))return JsonResponse({“test_confirmed”: True})

Yêu cầu của chúng tôi được chọn và chúng tôi hiển thị truy vấn bằng cách sử dụng. Phương thức GET của đối tượng yêu cầu. Chúng tôi đặc biệt lấy dữ liệu của mình từ các giá trị của thuộc tính “thử nghiệm” bằng cách sử dụng. được()

Bản in của chúng tôi cho chúng tôi thấy

this is a test

Từ đó, chúng tôi trả về một đối tượng JSON bằng cách sử dụng JsonResponse và khi chúng tôi nhìn vào bảng điều khiển của mình. log, chúng ta thấy như sau

Object { test_confirmed: true }

Tóm lại là

Trong bài viết này, chúng tôi đã giới thiệu một cách để gửi dữ liệu giữa máy khách và máy chủ. Chúng tôi đã tiếp xúc với đối tượng JSON, các yêu cầu và phản hồi HTML, cũng như xem mọi thứ có thể trông như thế nào trong thực tế

Làm cách nào để kết nối JavaScript với Django?

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

Làm cách nào để thêm JavaScript bên ngoài vào Django?

Tôi có nên sử dụng JavaScript với Django không?