在 Python 中將 Ajax 與 Django 整合
本文旨在演示 Ajax 是什麼，將 Ajax 與 Django 整合，從瀏覽器傳送 Ajax 的 get 和 post 請求，並用 Python 處理 Django 站點上的資料。
在 Python 中將 Ajax 與 Django 整合
Ajax 代表非同步 JavaScript 和 XML，但這是什麼意思？Ajax 只是一種 Web 開發技術，用於在後臺傳送和檢索資料而無需重新整理網頁。
一個真實的 Ajax 示例是，如果我們前往 Twitter 並開啟我們的提要。
一段時間後，你會看到螢幕頂部出現一個選單欄，指示有新的推文可用，如果你等待更長的時間，你會看到隨著越來越多的人在 Twitter 上釋出內容，數量會增加。
我們需要注意的是，我們的頁面永遠不會完全重新整理。現在我們對 Ajax 有了一些瞭解，讓我們看看如何在 Django 框架中使用它。
我們建立了一個簡單的專案來演示如何使用 Ajax，但是不可能演示如何使用我們的整個專案。如果你熟悉 Django，那麼你已經知道如何建立 Django 專案，因此我們有一個名為 contact 的模型，其中包含一些欄位和一個用於聯絡模型表單的簡單模型。
當我們提交表單時，資料將被儲存到資料庫中，重定向到同一頁面本身，並設定相應的 URL。
我們使用 jQuery 來觸發 Ajax，還需要 CDN。所以每當我們提交表單時，我們會在表單中做的邏輯是，如果表單有效，伺服器就會響應。
我們使用常規的 JavaScript 來獲取表單的物件，所以我們需要一個 submit 事件，如果該事件被觸發，它將呼叫一個 submithandler 函式。
我們建立了一個 submithandler 函式，它會預設接收事件，我們要阻止表單提交的預設操作，這意味著表單不會被提交，所以要發出 Ajax 請求，我們將在我們的 HTML 檔案。
我們將在 Ajax 物件中指定一些屬性；第一個是 type，它是一種請求。
我們可以傳遞兩種型別的請求； get 或 post，所以我們必須通過 post。下一個屬性是 url，這意味著我們要點選 post 請求的 URL。
所以我們將在這裡使用 Django 模板索引；我們將傳遞我們的 contact 頁面的 URL。contact 是我們稍後將在 url.py 中編寫的 URL 的名稱。
現在下一個是 data，這意味著我們希望表單資料在伺服器端，以便在伺服器上處理表單資料。因此，我們需要使用表單 ID 在 Ajax 請求中傳送該資料。
下一個是 dataType，它是我們期望從伺服器返回的資料型別，所以如果我們在檢視中傳送一些 HTTP 響應並且表單是有效的或傳送一些 JSON 資料，我們需要以 JSON 格式傳遞資料格式，所以我們以 JSON 型別傳遞它。
我們為最後一個傳遞了 success 屬性，它接受一個名為 successFunction 的函式。如果請求成功，此函式將彈出一個警報視窗。
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script>
const form = document.getElementById('form');
form.addEventListener("submit", submitHandler);
function submitHandler(e) {
e.preventDefault();
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : '{% url 'contact' %}', // the url where we want to POST
data : $('#form').serialize(), // our form data
dataType : 'json', // what type of data do we expect back from the server
success : successFunction
});
}
function successFunction(msg) {
if (msg.message === 'success') {
alert('Success!');
form.reset()
}
}
</script>
現在我們需要設定名稱為 contact 的 URL，並從 views.py 檔案中呼叫 contact 方法，這意味著當使用者點選此 URL 時，將呼叫 contact 方法。
urlpatterns = [
path('', views.contact, name='contact'),
]
現在我們可以在 views.py 檔案中做一些事情，所以我們知道每當我們提交表單時，contact 函式會呼叫相應的函式並捕獲它，它會收到一個 Ajax 請求並檢查 Ajax 使用 .is_ajax() 方法的請求是否有效。
from django.http import JsonResponse
from django.shortcuts import render, redirect
from .forms import ContactModelForm
def contact(request):
form = ContactModelForm()
if request.is_ajax():
form = ContactModelForm(request.POST)
print(request.POST)
if form.is_valid():
form.save()
return JsonResponse({
'message': 'success'
})
return render(request, 'contact.html', {'form': form})
點選這裡閱讀官方文件，將 Ajax 與 Django 整合。
Hello! I am Salman Bin Mehmood(Baum), a software developer and I help organizations, address complex problems. My expertise lies within back-end, data science and machine learning. I am a lifelong learner, currently working on metaverse, and enrolled in a course building an AI application with python. I love solving problems and developing bug-free software for people. I write content related to python and hot Technologies.
LinkedIn