AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
js实现两个数的和:
///模板方面///// <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {% csrf_token %} <p>输入<input type="text" id="t1"></p> <p>输入<input type="text" id="t2"></p> <p><button class="btn">计算和</button><span class="sum"></span></p> </body> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script> <script> $('.btn').click(function () { $.ajax({ url:'/sum2/', type:"POST", data:({ csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(), t1:$('#t1').val(), t2:$('#t2').val() }), success:function (sum) { var sum=JSON.parse(sum); $('.sum').html(sum) } }) }) </script> </html> ///视图方面///// def sum(request): # t1=request.GET.get('t1') # t2=request.GET.get('t2') # print(t1) return render(request,'sum.html') def sum2(request): t1=request.GET.get('t1') t2=request.GET.get('t2') return HttpResponse(json.dumps(int(t1)+int(t2)))
用Ajax实现表的删除操作：
///////模板方面///////// <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>实现计算器的功能</h3> <div class="bs-example" data-example-id="contextual-table"> <table class="table"> <thead> <tr> <th>序号</th> <th>用户名</th> <th>密码</th> </tr> </thead> <tbody> {% for user in user_list %} <tr class="active"> <td class="id">{{ user.id }}</td> <td>{{ user.username }}</td> <td>{{ user.password }}</td> <td><button>删除</button></td> </tr> {% endfor %} </tbody> </table> </div> </body> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script> <script> $('button').click(function () { $.ajax({ url:'/list_ajax/', type:'get', data:({ id:$(this).parent().parent().children().first().text() }), success:function (id) { var id=JSON.parse(id); console.log($(this)); $('.id').each(function () { if($(this).html()==id){ $(this).parent().remove() } }) {# $(this).parent().parent().remove()#} } }) }) </script> </html> ///////视图方面///////// def list(request): user_list=models.UserInfo.objects.all() return render(request,'list.html',{'user_list':user_list}) def list_ajax(request): id=request.GET.get('id') models.UserInfo.objects.filter(id=id).delete() return HttpResponse(json.dumps(id))