AJAX准备知识：JSON

什么是 JSON ？

  • JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
  • JSON 是轻量级的文本数据交换格式
  • JSON 独立于语言 *
  • JSON 具有自我描述性，更易理解

* JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

啥都别多说了，上图吧！

合格的json对象：

  1. ["one", "two", "three"]
  2. { "one": 1, "two": 2, "three": 3 }
  3. {"names": ["张三", "李四"] }
  4. [ { "name": "张三"}, {"name": "李四"} ]　

不合格的json对象：

  1. { name: "张三", 'age': 32 }  // 属性名必须使用双引号
  2. [32, 64, 128, 0xFFF] // 不能使用十六进制值
  3. { "name": "张三", "age": undefined }  // 不能使用undefined
  4. { "name": "张三",
  5.   "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
  6.   "getName":  function() {return this.name;}  // 不能使用函数和日期对象
  7. }

stringify与parse方法

JavaScript中关于JSON对象和字符串转换的两个方法：

JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象　

  1. JSON.parse('{"name":"Q1mi"}');
  2. JSON.parse('{name:"Q1mi"}') ;   // 错误
  3. JSON.parse('[18,undefined]') ;   // 错误

JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。　

  1. JSON.stringify({"name":"Q1mi"})

和XML的比较

JSON 格式于2001年由 Douglas Crockford 提出，目的就是取代繁琐笨重的 XML 格式。

JSON 格式有两个显著的优点：书写简单，一目了然；符合 JavaScript 原生语法，可以由解释引擎直接处理，不用另外添加解析代码。所以，JSON迅速被接受，已经成为各大网站交换数据的标准格式，并被写入ECMAScript 5，成为标准的一部分。

XML和JSON都使用结构化方法来标记数据，下面来做一个简单的比较。

用XML表示中国部分省市数据如下：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <country>
  3.     <name>中国</name>
  4.     <province>
  5.         <name>黑龙江</name>
  6.         <cities>
  7.             <city>哈尔滨</city>
  8.             <city>大庆</city>
  9.         </cities>
  10.     </province>
  11.     <province>
  12.         <name>广东</name>
  13.         <cities>
  14.             <city>广州</city>
  15.             <city>深圳</city>
  16.             <city>珠海</city>
  17.         </cities>
  18.     </province>
  19.     <province>
  20.         <name>台湾</name>
  21.         <cities>
  22.             <city>台北</city>
  23.             <city>高雄</city>
  24.         </cities>
  25.     </province>
  26.     <province>
  27.         <name>新疆</name>
  28.         <cities>
  29.             <city>乌鲁木齐</city>
  30.         </cities>
  31.     </province>
  32. </country>

XML格式数据

用JSON表示如下：

  1. {
  2.     "name": "中国",
  3.     "province": [{
  4.         "name": "黑龙江",
  5.         "cities": {
  6.             "city": ["哈尔滨", "大庆"]
  7.         }
  8.     }, {
  9.         "name": "广东",
  10.         "cities": {
  11.             "city": ["广州", "深圳", "珠海"]
  12.         }
  13.     }, {
  14.         "name": "台湾",
  15.         "cities": {
  16.             "city": ["台北", "高雄"]
  17.         }
  18.     }, {
  19.         "name": "新疆",
  20.         "cities": {
  21.             "city": ["乌鲁木齐"]
  22.         }
  23.     }]
  24. }

JSON格式数据

由上面的两端代码可以看出，JSON 简单的语法格式和清晰的层次结构明显要比 XML 容易阅读，并且在数据交换方面，由于 JSON 所使用的字符要比 XML 少得多，可以大大得节约传输数据所占用得带宽。

AJAX简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

  • 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
  • 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

示例

页面输入两个整数，通过AJAX传输到后端计算出结果并返回。

  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>AJAX局部刷新实例</title>
  8. </head>
  9. <body>
  10.  
  11. <input type="text" id="i1">+
  12. <input type="text" id="i2">=
  13. <input type="text" id="i3">
  14. <input type="button" value="AJAX提交" id="b1">
  15.  
  16. <script src="/static/jquery-3.2.1.min.js"></script>
  17. <script>
  18.   $("#b1").on("click", function () {
  19.     $.ajax({
  20.       url:"/ajax_add/",
  21.       type:"GET",
  22.       data:{"i1":$("#i1").val(),"i2":$("#i2").val()},
  23.       success:function (data) {
  24.         $("#i3").val(data);
  25.       }
  26.     })
  27.   })
  28. </script>
  29. </body>
  30. </html>

HTML部分代码

  1. def ajax_demo1(request):
  2.     return render(request, "ajax_demo1.html")
  3.  
  4. def ajax_add(request):
  5.     i1 = int(request.GET.get("i1"))
  6.     i2 = int(request.GET.get("i2"))
  7.     ret = i1 + i2
  8.     return JsonResponse(ret, safe=False)

views.py

  1. urlpatterns = [
  2.     ...
  3.     url(r'^ajax_add/', views.ajax_add),
  4.     url(r'^ajax_demo1/', views.ajax_demo1),
  5.     ...
  6. ]

urls.py

AJAX常见应用情景

搜索引擎根据用户输入的关键字，自动提示检索关键字。

还有一个很重要的应用场景就是注册时候的用户名的查重。

其实这里就使用了AJAX技术！当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。

  • 整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
  • 当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为lemontree7777777的用户是否存在，最终服务器返回true表示名为lemontree7777777的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”。

  • 整个过程中页面没有刷新，只是局部刷新了；
  • 在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；

AJAX的优缺点

优点：

  • AJAX使用JavaScript技术向服务器发送异步请求；
  • AJAX请求无须刷新整个页面；
  • 因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；

jQuery实现的AJAX

最基本的jQuery发送AJAX请求示例：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>ajax test</title>
  8.   <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  9. </head>
  10. <body>
  11. <button id="ajaxTest">AJAX 测试</button>
  12. <script>
  13.   $("#ajaxTest").click(function () {
  14.     $.ajax({
  15.       url: "/ajax_test/",
  16.       type: "POST",
  17.       data: {username: "Q1mi", password: 123456},
  18.       success: function (data) {
  19.         alert(data)
  20.       }
  21.     })
  22.   })
  23. </script>
  24. </body>
  25. </html>

views.py：

  1. def ajax_test(request):
  2.     user_name = request.POST.get("username")
  3.     password = request.POST.get("password")
  4.     print(user_name, password)
  5.     return HttpResponse("OK")

$.ajax参数

data参数中的键值对，如果值值不为字符串，需要将其转换成字符串类型。

  1.   $("#b1").on("click", function () {
  2.     $.ajax({
  3.       url:"/ajax_add/",
  4.       type:"GET",
  5.       data:{"i1":$("#i1").val(),"i2":$("#i2").val(),"hehe": JSON.stringify([1, 2, 3])},
  6.       success:function (data) {
  7.         $("#i3").val(data);
  8.       }
  9.     })
  10.   })

JS实现AJAX

  1. var b2 = document.getElementById("b2");
  2.   b2.onclick = function () {
  3.     // 原生JS
  4.     var xmlHttp = new XMLHttpRequest();
  5.     xmlHttp.open("POST", "/ajax_test/", true);
  6.     xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  7.     xmlHttp.send("username=q1mi&password=123456");
  8.     xmlHttp.onreadystatechange = function () {
  9.       if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
  10.         alert(xmlHttp.responseText);
  11.       }
  12.     };
  13.   };

AJAX请求如何设置csrf_token

方式1

通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送。

  1. $.ajax({
  2.   url: "/cookie_ajax/",
  3.   type: "POST",
  4.   data: {
  5.     "username": "Q1mi",
  6.     "password": 123456,
  7.     "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()  // 使用JQuery取出csrfmiddlewaretoken的值，拼接到data中
  8.   },
  9.   success: function (data) {
  10.     console.log(data);
  11.   }
  12. })

方式2

通过获取返回的cookie中的字符串 放置在请求头中发送。

注意：需要引入一个jquery.cookie.js插件。

  1. $.ajax({
  2.   url: "/cookie_ajax/",
  3.   type: "POST",
  4.   headers: {"X-CSRFToken": $.cookie('csrftoken')},  // 从Cookie取csrf_token，并设置ajax请求头
  5.   data: {"username": "Q1mi", "password": 123456},
  6.   success: function (data) {
  7.     console.log(data);
  8.   }
  9. })

或者用自己写一个getCookie方法：

  1. function getCookie(name) {
  2.     var cookieValue = null;
  3.     if (document.cookie && document.cookie !== '') {
  4.         var cookies = document.cookie.split(';');
  5.         for (var i = 0; i < cookies.length; i++) {
  6.             var cookie = jQuery.trim(cookies[i]);
  7.             // Does this cookie string begin with the name we want?
  8.             if (cookie.substring(0, name.length + 1) === (name + '=')) {
  9.                 cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
  10.                 break;
  11.             }
  12.         }
  13.     }
  14.     return cookieValue;
  15. }
  16. var csrftoken = getCookie('csrftoken');

每一次都这么写太麻烦了，可以使用$.ajaxSetup()方法为ajax请求统一设置。

  1. function csrfSafeMethod(method) {
  2.   // these HTTP methods do not require CSRF protection
  3.   return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  4. }
  5.  
  6. $.ajaxSetup({
  7.   beforeSend: function (xhr, settings) {
  8.     if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
  9.       xhr.setRequestHeader("X-CSRFToken", csrftoken);
  10.     }
  11.   }
  12. });

更多细节详见：Djagno官方文档中关于CSRF的内容

AJAX上传文件

  1. // 上传文件示例
  2. $("#b3").click(function () {
  3.   var formData = new FormData();
  4.   formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
  5.   formData.append("f1", $("#f1")[0].files[0]);
  6.   $.ajax({
  7.     url: "/upload/",
  8.     type: "POST",
  9.     processData: false,  // 告诉jQuery不要去处理发送的数据
  10.     contentType: false,  // 告诉jQuery不要去设置Content-Type请求头
  11.     data: formData,
  12.     success:function (data) {
  13.       console.log(data)
  14.     }
  15.   })
  16. })

练习（用户名是否已被注册）

功能介绍

在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回这个用户名是否已经被注册过。

案例分析

  • 页面中给出注册表单；
  • 在username input标签中绑定onblur事件处理函数。
  • 当input标签失去焦点后获取 username表单字段的值，向服务端发送AJAX请求；
  • django的视图函数中处理该请求，获取username值，判断该用户在数据库中是否被注册，如果被注册了就返回“该用户已被注册”，否则响应“该用户名可以注册”。

序列化

Django内置的serializers

  1. def books_json(request):
  2.     book_list = models.Book.objects.all()[0:10]
  3.     from django.core import serializers
  4.     ret = serializers.serialize("json", book_list)
  5.     return HttpResponse(ret)

补充一个SweetAlert插件示例

点击下载Bootstrap-sweetalert项目。

  1. $(".btn-danger").on("click", function () {
  2.   swal({
  3.     title: "你确定要删除吗？",
  4.     text: "删除可就找不回来了哦！",
  5.     type: "warning",
  6.     showCancelButton: true,
  7.     confirmButtonClass: "btn-danger",
  8.     confirmButtonText: "删除",
  9.     cancelButtonText: "取消",
  10.     closeOnConfirm: false
  11.     },
  12.     function () {
  13.       var deleteId = $(this).parent().parent().attr("data_id");
  14.       $.ajax({
  15.         url: "/delete_book/",
  16.         type: "post",
  17.         data: {"id": deleteId},
  18.         success: function (data) {
  19.           if (data.status === 1) {
  20.             swal("删除成功!", "你可以准备跑路了！", "success");
  21.           } else {
  22.             swal("删除失败", "你可以再尝试一下！", "error")
  23.           }
  24.         }
  25.       })
  26.     });
  27. })

Django学习笔记之Ajax入门的更多相关文章

  1. Django学习笔记之Ajax与文件上传

      Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输 ...

  2. Django学习笔记（14）——AJAX与Form组件知识补充（局部钩子和全局钩子详解）

    我在之前做了一个关于AJAX和form组件的笔记,可以参考:Django学习笔记(8)——前后台数据交互实战(AJAX):Django学习笔记(6)——Form表单 我觉得自己在写Django笔记(8 ...

  3. Django学习笔记（9）—— 开发用户注册与登录系统

    一,项目题目: 开发用户注册与登录系统 该项目主要练习使用Django开发一个用户注册与登录的系统,通过这个项目然后巩固自己这段时间所学习的Django知识. 二,项目需求: 开发一个简单的用户登录与 ...

  4. Django学习笔记（13）——Django的用户认证（Auth）组件，视图层和QuerySet API

    用户认证组件的学习 用户认证是通过取表单数据根数据库对应表存储的值做比对,比对成功就返回一个页面,不成功就重定向到登录页面.我们自己写的话当然也是可以的,只不过多写了几个视图,冗余代码多,当然我们也可 ...

  5. Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

    本文学习如何通过Django使用Bootstrap.其实在之前好几个Django项目中已经尝试使用过了Bootstrap,而且都留有学习记录,我已经大概有了一个大的框架,那么本文就从头再走一遍流程,其 ...

  6. Django学习笔记（18）——BBS+Blog项目开发（2）主体思路及流程

    这篇博客主要完成一个BBS+Blog项目,那么主要是模仿博客园的博客思路,使用Django框架进行练习. 准备:项目需求分析 在做一个项目的时候,我们首先做的就是谈清楚项目需求,功能需求,然后才开始写 ...

  7. Django学习笔记（16）——扩展Django自带User模型，实现用户注册与登录

    一,项目题目:扩展Django自带User模型,实现用户注册与登录 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册,登录,用户认证,注销,修改密码等功能. ...

  8. Django学习笔记（11）——开发图书管理页面

    一,项目题目: 开发图书管理页面 该项目主要练习Django对多个数据库进行增删改查的操作. 二,项目需求: 基础需求:75% 1. 列出图书列表.出版社列表.作者列表 2. 点击作者,会列出其出版的 ...

  9. Hadoop学习笔记(1) ——菜鸟入门

    Hadoop学习笔记(1) ——菜鸟入门 Hadoop是什么?先问一下百度吧: [百度百科]一个分布式系统基础架构,由Apache基金会所开发.用户可以在不了解分布式底层细节的情况下,开发分布式程序. ...

随机推荐

  1. vim 命令大全（写的非常全和好）http://blog.csdn.net/woshixiaosimao/article/details/54312738

    下文转自链接.由原作者陈皓译自<Learn ViM Progressively>,非常不错. ——————————正文开始—————————— 你想以最快的速度学习人类史上最好的文本编辑器 ...

  2. hdu 1051:Wooden Sticks（水题，贪心）

    Wooden Sticks Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  3. 在WPF的DataGrid中对行添加单击事件

    在做的一个c#的项目中发现Datagrid没办法直接对鼠标单击进行响应,调用MouseDown事件也需要点击某一行第二次才能响应.所以借助EventSetter来简单的实现了一个. 界面部分的代码 & ...

  4. ChemDraw绘制DNA结构的技巧

    对生物有一定了解的朋友都知道DNA是染色体的重要组成部分,DNA结构中包含重要的遗传物质,孩子的DNA来自父母DNA的组合,这就是为什么“一家人相像”的奥秘所在.ChemDraw虽然号称是化学结构绘制 ...

  5. Laravel5.1 搭建博客 --展示简单的首页

    今天起开始搭建博客,把之前学的东西运用下. 1 创建 配置项目 1.1 创建项目 composer create-project laravel/laravel blog 5.1.1 1.2 配置数据 ...

  6. SurvivalShooter学习笔记（二.玩家移动旋转）

    该案例中:(PC端操作) 1.玩家移动输入控制通过虚拟轴Axis,旋转输入控制通过鼠标位置: 2.玩家始终面朝鼠标停留点,鼠标停留点通过摄像机朝地面的射线获取: 3.玩家待机移动状态切换通过Anima ...

  7. js一个数组变为指定长度的多个数组

    var dataArr = [0,1,2,3,4,5,6,7,8,9,10]; var newArr = []; var s = parseInt(dataArr.length / 4); var n ...

  8. 在VerilogHDL中调用VHDL的模块

    最近忽然要用到在VerilogHDL中调用VHDL的模块,从网上找了例程,把自己会忘掉的东西记在这里,. 2选1多路复用器的VHDL描述:entity mux2_1 is port( dina : i ...

  9. JS中：数组和二维数组、MAP、Set和枚举的使用

    1.数组和二维数组:   方法一: var names = ['Michael', 'Bob', 'Tracy']; names[0];// 'Michael' 方法二: var mycars=new ...

  10. 巨蟒python全栈开发flask4

    1.偏函数 2.ThreadingLocal线程安全 空间换取时间 3.LocalStack 4.RunFlask+request 5.请求上文 6.请求下文