初試Ajax非同步請求（基於Django框架）

來自專欄極樂科技4 人贊了文章

概要：

Ajax非同步請求數據之前就聽朋友提起過，但是之前一直沒有什麼機會使用這個技術，就沒有去了解，後面在做網站評論這一功能時，為了使用戶評論之後不用刷新網頁就能夠看到剛剛評論的數據，所以決定使用Ajax來非同步請求數據，最近正在學習當中。Ajax最大的特點就是在不刷新當前頁面的情況下實現數據的請求。

常規使用form表單進行數據的提交：

一般情況下要實現前端向後端發送數據，常用的有兩種傳輸數據的方式：POST和GET，而常用的數據提交形式是使用Form表單，在Form表中指定action來指定提交數據的目標地址，當使用submit提交數據後，隨著網頁的跳轉前端會把數據發送給後端，實現數據的交互。

代碼：

<form id="hwy" action="/ajax_form/" method="post"> {% csrf_token %} <input type="text" name="username"> <br/> <input type="password" name="password"> <br> <input type="submit" name="submit" value="提交"> </form>

使用Ajax實現數據提交：

前端代碼：

<script type="text/javascript"> {# 通過id找到對應的表單 #} $(#hwy).submit(function () { {# 使用ajax進行數據非同步提交 #} $.ajax({ // 提交數據的url url: /ajax_form/, // 提交數據的方式為POST type: POST, // 指定提交的數據，這裡使用的serialize方法，該方法可以將當前的表單轉化為可以使用Ajax提交的數據格式 data: $(this).serialize(), // 不開啟數據緩存 cache: false, // 請求成功則會執行該方法 success: function (data) { // 顯示響應到的數據 console.log(data); // 插入數據 var comment_html = "<div id=hwy_1>" + data[log_info] + "</div>"; $(#hwy_1).remove(); $(#ajax_data).prepend(comment_html); $(#hwy_input).val(); }, }); {# 放回一個false，使得點擊提交按鈕後不會進行數據提交 #} return false; });</script>其中指定了提交數據的目標URL、提交數據的形式、提交的數據，其中提交數據是使用的是data: $(this).serialize(),，其含義是將當前選定的表單值進行序列化，使其能夠完成Ajax的數據提交，數據提交到目標URL後，後端就需要對數據進行接收和處理，由於是POST請求，所以接受參數的方法為request.POST[key]，獲取到數據並處理後，需要將數據再傳遞給前段，需要注意的是：返回的數據的格式必須是Json格式，所以就必須使用到Django提供的JsonResponse方法。views.pyfrom django.shortcuts import render, HttpResponsefrom django.http import JsonResponse# Create your views here.def ajax(request): return render(request, Ajax.html)def ajax_form(request): data = {} data[status] = SUCCESS data[log_info] = request.POST[username] return JsonResponse(data)

返回數據後，前端會接受該數據，我們需要做的就是將該數據顯示在前端頁面。

GitHub源碼、原文地址、我的網站。

推薦閱讀：