楔子：

不同的编程语言拥有不同的数据类型，但很多时候都需要多种编程语言实现数据交互，而各语言都认识的数据类型就是字符串，而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 importmodels2 importjson3

4

5 deflogin(request):6 return render(request,"login.html")7

8

9

10

11 defche(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 returnHttpResponse(json.dumps(ret))19 exceptException:20 return HttpResponse(json.dumps(ret))

视图代码

1

2

3

4

5

6

7

Title

8

9

10

请输入用户名：

11

请输入密码：

12

13

14

15 {% load static %}16

17

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

44

45

前端代码

今天出现的一些问题：

采用不写死的方式引用css和js的时候，在引用之前要加上

1 {% load static %}