django ajax 简书,Django 结合 jQuery 实现 AJAX（一）

本文我们结合 Django 和 jQuery 做一个不用刷新网页就能通过输入用户名查询该用户年龄的页面 。

编写 test.html(记得要引入 jQuery)，这里我们采用 jQuery 的 get 方法向服务器端发送请求：

姓名：

年龄：

点击

// 请求服务器，返回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);

})

})

})

编写 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"),

]

测试结果：