Ajax

楔子：

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

posted on 2018-01-30 21:20 云烟||成雨阅读(149) 评论(0) 编辑收藏举报