介绍
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错误
