楔子：
不同的编程语言拥有不同的数据类型，但很多时候都需要多种编程语言实现数据交互，而各语言都认识的数据类型就是字符串，而json是每个编程语言都提供的序列化方法，从而实现不同编程语言的数据交换。Ajax可以避免多次的向服务发送表单数据，减缓服务器的数据压力。
功能：
不刷新页面，实现客户端与服务端的数据交互。
特点：
异步交互
局部刷新
注意：
Ajax和jason并没有直接的关系，或者说两者根本就没关系，只是在js中，Ajax有时候需要配合json的使用。
在python中json的使用：
序列化：json.dumps()
反序列化：json.loads()
在js中json的使用：
序列化：JSON.stringfy()
反序列化：var data = JSON.parse();
代码示例：
要实现的功能是：点击登录按钮，通过Ajax向服务器校验数据，若校验成功，点击登录后返回index页面，若校验不成功，则提示用户名或密码错误。
1 from app01 import models 2 import json 3 4 5 def login(request): 6 return render(request,"login.html") 7 8 9 10 11 def che(request): 12 ret = {"is_ok":False} 13 user = request.POST.get("user") 14 pwd = request.POST.get("pwd") 15 try: 16 tmp = models.User.objects.get(name=user,pwd=pwd) 17 ret["is_ok"]=True 18 return HttpResponse(json.dumps(ret)) 19 except Exception: 20 return HttpResponse(json.dumps(ret))
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>Title</title> 8 </head> 9 <body> 10 <p>请输入用户名：<input type="text" class="user"></p> 11 <p>请输入密码：<input type="password" class="pwd"></p> 12 <p><input type="submit" value="提交" class="sub"></p> 13 <span id="erro"></span> 14 15 {% load static %} 16 <script src="{% static ‘js/jquery-3.2.1.min.js‘ %}"></script> 17 <script> 18 $.ajaxSetup({ 19 data: {csrfmiddlewaretoken: ‘{{ csrf_token }}‘} 20 }); 21 $(".sub").click(function () { 22 $.ajax({ 23 url: "/che/", 24 data: {"user": $(".user").val(), "pwd": $(".pwd").val()}, 25 type: "post", 26 success: function (data) { 27 console.log(data); 28 {# 将经过序列化的字典进行反序列化 #} 29 var val = JSON.parse(data); 30 if (val.is_ok) { 31 $("#erro").text("登录成功").css("color", ‘green‘); 32 location.href = ‘/index/‘; 33 } 34 else { 35 $("#erro").text("用户名或密码错误").css("color", ‘red‘); 36 console.log("nidasdasd"); 37 } 38 } 39 }) 40 }); 41 42 43 </script> 44 </body> 45 </html>
今天出现的一些问题：
采用不写死的方式引用css和js的时候，在引用之前要加上
1 {% load static %}
