介绍
Ajax
Ajax（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
Ajax除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）。因此使用ajax的主要特点有如下几点：（1）Ajax使用Javascript技术向服务器发送异步请求；（2）Ajax无须刷新整个页面；（3）因为服务器响应内容不再是整个页面，而是页面中的局部，所以Ajax性能高。在django入门项目中我们已经简单的介绍了一下ajax应用。下面我们将做详细介绍。
Ajax的优缺点
优点：
Ajax使用JavaScript技术向服务器发送异步请求;
Ajax无须刷新整个页面，提高用户的体验度
因为服务器响应内容不再是整个页面，而是页面中的局部，所以Ajax性能高
关于AJAX的例子
ajax实现方式（无参数）
具体实现方式实例如下（完成一次ajax请求，且完成了一个局部刷新）：
html文件部分：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta http-equiv="X-UA-Compatible" content="IE=edge"> ???<meta name="viewport" content="width=device-width, initial-scale=1"> ???<title>Title</title> ???<script src="/static/js/jquery-3.2.1.min.js"></script></head><body><h3>INDEX</h3><button class="s1">send_ajax</button><p class="name"></p><script> ???// ajax的无参请求 ???$(".s1").click(function () { ???????// 触发ajax事件 ???????$.ajax({ ???????????url: "/ajax_handle/", ???????????type: "get", ???????????success: function (data) { ??{# data相当于服务端拿过来的"黎诗"的数据 #}{# ?当某一个事件完成之后，固定执行另外一个函数 ?????#}{# ?在这里success也相当于一个回调函数， 当我们请求过去，到达服务器，
服务器响应过来return HttpResponse("黎诗")，这里success开始工作 ，把数据响应到客户端 这样就是完整的过程 ??#} ???????????????console.log(data);{# ???????????????完成一次ajax请求，且完成了一个局部刷新#} ???????????????$(".name").html(data) ?{# 把一个data字符串赋到一个文本上 #} ???????????} ???????}) ???}); ???</script></body></html>from django.shortcuts import render,HttpResponse# Create your views here.def index(request): ???return render(request,"index.html")def ajax_handle(request): ???return HttpResponse("黎诗")???url(r‘^index/‘, views.index), ?# index(request) 必须需传一个参数 ???url(r‘^ajax_handle/‘, views.ajax_handle), ?# index(request)
关于AJAX的有参操作
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta http-equiv="X-UA-Compatible" content="IE=edge"> ???<meta name="viewport" content="width=device-width, initial-scale=1"> ???<title>Title</title> ???<script src="/static/js/jquery-3.2.1.min.js"></script></head><body><input type="text" id="n1">+<input type="text" id="n2">=<input type="text" id="sum">{#为什么不需要name标签：form表单的作用，点submit的按钮,自动绑定事件，以name,ajax,是我们直接拼键值对了，我们写的是什么，他就是什么#}<button class="count">计算</button><script> ???// ajax的有参请求 ???//绑定点击事件 ???$(".count").click(function () { ???????//触发ajax请求 ???????$.ajax({ ???????????url:"/count/",{# ???????????data-->指定你要放的参数#} ???????????data:{"num1":$("#n1").val(),"num2":$("#n2").val()}, ???????{# 这里写的都是JavaScript代码,与Python无关，不是字典,是基于js的数据类型，obj类型#}{# ???????这里加键值对#} ???????????success:function (data) { ???????????????console.log(data); ???????????????$("#sum").val(data) ???????????} ???????}) ???})</script></body></html>def count(request): ???num1 = request.GET.get("num1") ???num2 = request.GET.get("num2") ???ret = int(num1)+int(num2) ???return HttpResponse(str(ret))注意点
data里面的类型须是符合序列化字符串
校验用户注册信息
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta http-equiv="X-UA-Compatible" content="IE=edge"> ???<meta name="viewport" content="width=device-width, initial-scale=1"> ???<title>Title</title> ???<script src="/static/js/jquery-3.2.1.min.js"></script></head><body>{% csrf_token %}<h4>校验用户是否存在</h4><input type="text" id="user"><span></span><script> ????//校验注册信息 ???$("#user").blur(function () { ???????$.ajax({ ???????????url: "/jiaoyan_user/", ???????????type: "post", ???????????data: { ???????????????"user": $("#user").val(), ???????????????"csrfmiddlewaretoken": $("[name=‘csrfmiddlewaretoken‘]").val()}, ???????????success: function (data) { ???????????????console.log(data); ???????????????var data = JSON.parse(data); ???????????????{# ???????????????反序列化为字典#} ???????????????if (data.is_reg) { ???????????????????$("#user").next().html("该用户已注册").css("color","red"); ???????????????????{# ???????????????????当注册，添加错误信息，#} ???????????????} ???????????} ???????}) ???})</script></body></html>def jiaoyan_user(request): ???response={"is_reg":True} ???user=request.POST.get("user") ???# == 表示在数据库里有 ???if user == "jassin": ???????pass ???else: ???????response["is_reg"] = False ???import json ???# 返回到页面，要序列化成字符串 ???return HttpResponse(json.dumps(response))?url(r‘^jiaoyan_user/‘, views.jiaoyan_user), ?# index(request)
注意点
关于csrf错误
Django 之Ajax
原文地址：https://www.cnblogs.com/jassin-du/p/8386926.html