本文我們結(jié)合 Django 和 jQuery 做一個不用刷新網(wǎng)頁就能通過輸入用戶名查詢該用戶年齡的頁面 彩掐。
編寫 test.html（記得要引入 jQuery），這里我們采用 jQuery 的 get 方法向服務(wù)器端發(fā)送請求：
<body>
<p>姓名：<input type="text" id="name" value=""></p>
<p>年齡：<span id="result"></span></p>
<button id="AJAX_get" type="button">點擊</button>
</body>
<script type="text/javascript">
// 請求服務(wù)器翰绊，返回JSON
$(document).ready(function(){
$("#AJAX_get").click(function(){
var name = $("#name").val(); // 獲取輸入框的值
var data = {"name": name}; // 打包成get請求發(fā)送的數(shù)據(jù)
$.get(
// 請求的url
'{% url 'ajax_get' %}',
// 發(fā)送的數(shù)據(jù)
data,
// 回調(diào)函數(shù)佩谷，其中ret是返回的JSON，可以以字典的方式調(diào)用
function(ret){
var name = ret['name'];
var age = ret['age'];
// 把查詢結(jié)果輸出到網(wǎng)頁上
$("#result").text(age);
})
})
})
</script>
編寫 views.py监嗜，這里我們使用 Django 的 JsonResponse 類，把前端輸入的數(shù)據(jù)進行相應(yīng)的查詢處理之后抡谐，輸出為 JSON裁奇。
from django.shortcuts import render
from django.http import JsonResponse
from myApp.models import Student
def test(request):
context = {}
return render(request, "test.html")
def ajax_get(request):
# 獲取前端輸入的內(nèi)容
name = request.GET.get('name')
try:
student = Student.objects.get(name=name)
age = student.age
except:
age = "該姓名不存在"
data = {}
data['name'] = name
data['age'] = age
return JsonResponse(data)
編寫 urls.py ：
from myApp.views import test, ajax_test
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^test/', test, name="test"),
url(r'^ajax_get/', ajax_get, name="ajax_get"),
]
測試結(jié)果：
