楔子：
不同的编程语言拥有不同的数据类型，但很多时候都需要多种编程语言实现数据交互，而各语言都认识的数据类型就是字符串，而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"]=True18 ????????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 %}Ajax
原文地址：https://www.cnblogs.com/liuyinzhou/p/8387327.html