Ajax

Posted 云烟成雨。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 %}

以上是关于Ajax的主要内容,如果未能解决你的问题,请参考以下文章

Javascript代码片段在drupal中不起作用

前端面试题之手写promise

Ajax 片段元标记 - Googlebot 未读取页面内容

执行AJAX返回HTML片段中的JavaScript脚本

javascript AJAX片段

Spring MVC 3.2 Thymeleaf Ajax 片段