本文我们结合 Django 和 jQuery 做一个不用刷新网页就能通过输入用户名查询该用户年龄的页面 。
编写 test.html（记得要引入 jQuery），这里我们采用 jQuery 的 get 方法向服务器端发送请求：
<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">
// 请求服务器，返回JSON
$(document).ready(function(){
$("#AJAX_get").click(function(){
var name = $("#name").val(); // 获取输入框的值
var data = {"name": name}; // 打包成get请求发送的数据
$.get(
// 请求的url
'{% url 'ajax_get' %}',
// 发送的数据
data,
// 回调函数，其中ret是返回的JSON，可以以字典的方式调用
function(ret){
var name = ret['name'];
var age = ret['age'];
// 把查询结果输出到网页上
$("#result").text(age);
})
})
})
</script>
编写 views.py，这里我们使用 Django 的 JsonResponse 类，把前端输入的数据进行相应的查询处理之后，输出为 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):
# 获取前端输入的内容
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"),
]
测试结果：
