Django框架-AJAX
Posted Alive
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Django框架-AJAX相关的知识，希望对你有一定的参考价值。
一、什么是Json？
1、定义
json是一种轻量级的数据交换格式，它是javasctipt的一个子集，采用完全独立于编程语言和平台的文本格式来存储和表示数据，它由一组组键值对的形式表示，语法格式简单，层次结构清晰，易于人阅读和编写，同时也易于机器解析和生成，并能有效地提升网络传输效率。
2、json支持的数据类型与在python中比较
json其实是从js中拿出来的一个对象，即是js的一个子集。
注：json的格式来源于js的格式，采用javascript对象表示法
2.1、js中对象的表示方法
js支持单引号，也支持双引号，也可以没有引号
1 // 在js中把{}这样的类型称为对象，类似python中的字典，js中没有字典一说 2 3 data = { 4 \'name\': \'python\', 5 "age":30, 6 hobby:\'watchTv\' 7 } 8 // js对象默认会把自己的键当成字符串处理，所以可以加引号也可以不加
2.2、json的格式
1 json 只认双引号 2 json 一定是一个字符串
示例：合格的json对象
1 ["shenzhen", "wuhan", "zhengzhou", \'beijing\'] 2 3 {"shenzhen":"深圳","wuhan":"武汉"} 4 5 {"name":["shenzhen","zhengzhou"]} 6 7 [{ "name":"sun" },{"name":"xiu"}]
不合格的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 }
3、python中的序列化dumps和反序列化loads
import json a = 10 b = \'python\' c = [11, 22, 33] d = (44, 55, 66) e = {\'name\': \'xiuwen\', \'age\': 30} f = True j = {11, 33, 55, 77} # 把基本数据类型转换成字符串的形式 print(json.dumps(a), type(json.dumps(a))) # 10 <class \'str\'> print(json.dumps(b), type(json.dumps(b))) # "python" <class \'str\'> print(json.dumps(c), type(json.dumps(c))) # [11, 22, 33] <class \'str\'> print(json.dumps(d), type(json.dumps(d))) # [44, 55, 66] <class \'str\'> print(json.dumps(e), type(json.dumps(e))) # {"name": "xiuwen", "age": 30} <class \'str\'> print(json.dumps(f), type(json.dumps(f))) # true <class \'str\'> # print(json.dumps(j), type(json.dumps(j))) # TypeError: Object of type \'set\' is not JSON serializable # python 中的集合不支持转换成json，元组转换成json会变成列表，且反序列无法转换回元组 #====================序列化==================== k = {\'a\': 1, \'b\': \'china\'} data = json.dumps(k) f = open(\'a.txt\', \'w\') f.write(data) # 将以双引号的字符串格式写入文本 f.close() #===================反序列化=================== f = open(\'a.txt\', \'r\') data = f.read() print(data, type(data)) data_str = json.loads(data) #{"a": 1, "b": "china"} <class \'str\'> print(data_str, type(data_str)) #{\'a\': 1, \'b\': \'china\'} <class \'dict\'>
4、JavaScript中的序列化(stringify)与反序列化（parse）
JSON.stringify():用于将一个js对象转换为json字符串
JSON.parse():用于将一个json字符串转换为js对象
<script> // ======js中的json序列化===== obj = {"age":30}; var data = JSON.stringify(obj); console.log(data,typeof (data)); // {"age":30} string // ======js中的json反序列化===== var data_str = JSON.parse(data); console.log(data_str) // Object </script>
二、Json和xml的比较
1、XML也是存数据的一种格式，也是一种标记语言。它是利用节点进行查找的
2、JSON 格式于2001年由 Douglas Crockford 提出，目的就是取代繁琐笨重的 XML 格式
3、JSON 格式有两个显著的优点：书写简单，一目了然；符合 JavaScript 原生语法，可以由解释引擎直接处理，不用另外添加解析代码。所以，JSON迅速被接受，已经成为各大网站交换数据的标准格式，并被写入ECMAScript 5，成为标准的一部分。
4、XML和JSON都使用结构化方法来标记数据
代码比较：
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>
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 简单的语法格式和清晰的层次结构明显要比 XML 容易阅读，并且在数据交换方面，由于 JSON 所使用的字符要比 XML 少得多，可以大大得节约传输数据所占用得带宽。
注意：
JSON格式取代了xml给网络传输带来了很大的便利,但是却没有了xml的一目了然,尤其是json数据很长的时候,我们会陷入繁琐复杂的数据节点查找中。
但是国人的一款在线工具 BeJson 、SoJson在线工具让众多程序员、新接触JSON格式的程序员更快的了解JSON的结构，更快的精确定位JSON格式错误。
三、AJAX简介
AJAX（Asynchronous Javascript And XML）翻译成中文就是‘异步的JavaScript和xml’。即使用JavaScript语言与服务器进行异步交互，传输的数据为xml（当然，传输的数据不只是xml，现在通常为json）。
ajax 不是新的编程语言，而是一种使用现有标准的新方法。
ajax 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）局部刷新
ajax 不需要任何浏览器插件，但需要用户允许javascript在浏览器上执行。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可发出第二个请求；
1、Ajax常见的应用情景
搜索引擎根据用户输入的关键字，自动提示检索关键字。
还有一个很重要的应用场景就是注册时的用户名的查重。
其实这里就使用了ajax技术，当文本框发送输入变化时，使用ajax技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，然后浏览器将后端返回的结果展示出来。
整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
当请求发出后，浏览器还可以进行其它操作，无需等待服务器的响应！
当输入用户名后，把光标移动到其它表单项上时，浏览器会使用ajax技术向服务器发出请求，服务器会查询名为lemontree777777的用户是否存在，最终返回true表示该用户名已经存在，浏览器再得到结果后显示“用户名已被注册！”。
- 整个过程中页面没有刷新，只是局部刷新了；
- 在请求发出后，浏览器不用等待服务器响应结果就可以进行其它操作；
2、ajax的优缺点
ajax使用JavaScript技术向服务器发送异步请求；
ajax请求无需刷新整个页面；
因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以ajax性能高；
3、jquery实现登录的ajax
urls.py
1 from django.conf.urls import url 2 from django.contrib import admin 3 from app01 import views 4 5 urlpatterns = [ 6 url(r\'^admin/\', admin.site.urls), 7 url(r\'^login_ajax/$\', views.login_ajax, name=\'login_ajax\'), 8 url(r\'^index/$\', views.index, name=\'index\'), 9 ]
views.py
1 from django.shortcuts import render, HttpResponse, redirect 2 import json 3 4 5 def index(request): 6 return HttpResponse(\'this is index\') 7 8 9 def login_ajax(request): 10 if request.method == "POST": 11 user = request.POST.get("user") 12 pwd = request.POST.get("pwd") 13 ret = {"status": 0, \'url\': \'\'} 14 if user == "alex" and pwd == "123": 15 ret[\'status\'] = 1 16 ret[\'url\'] = \'/index/\' 17 return HttpResponse(json.dumps(ret)) 18 19 return render(request, "login_ajax.html")
login_ajax.html
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> 8 <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css"> 9 <link rel="stylesheet" href="/static/css/signin.css"> 10 </head> 11 <body> 12 13 <div class="container"> 14 15 <form class="form-signin" action="{% url \'login\' %}" method="post"> 16 {% csrf_token %} 17 <h2 class="form-signin-heading">请登录</h2> 18 <label for="inputUser" class="sr-only">用户名</label> 19 <input type="text" id="inputUser" class="form-control" placeholder="用户名" required="" autofocus="" name="user"> 20 <label for="inputPassword" class="sr-only">密码</label> 21 <input type="password" id="inputPassword" class="form-control" placeholder="密码" required="" name="pwd"> 22 <div class="checkbox"> 23 <label> 24 <input type="checkbox" value="remember-me"> 记住我 25 </label> 26 </div> 27 <input class="btn btn-lg btn-primary btn-block" id="login" value="登陆"> 28 </form> 29 30 </div> <!-- /container --> 31 32 33 <script src="/static/jquery-3.3.1.min.js"></script> 34 <script> 35 36 $(\'#login\').click(function () { 37 $.ajax({ 38 url: \'/login_ajax/\', 39 type: \'post\', 40 data: { 41 csrfmiddlewaretoken: $("[name=\'csrfmiddlewaretoken\']").val(), 42 user: $(\'[name="user"]\').val(), 43 pwd: $(\'[name="pwd"]\').val() 44 }, 45 success: function (data) { 46 data = JSON.parse(data); 47 if (data.status) { 48 window.location = data.url 49 } 50 else { 51 alert(\'登陆失败\') 52 } 53 } 54 }) 55 }) 56 </script> 57 58 </body> 59 </html>
注：$.ajax发送ajax请求参数中data选项参数中的键值对，如果值不是字符串，需要将其转换成字符串。
4、js实现的ajax
<script> var b2 = document.getElementById(\'b2\'); b2.onclick = function (ev) { // 原生js var xmlHttp = new XMLHttpRequest(); xmlHttp.open(\'POST\',\'/ajax_test/\',true); xmlHttp.setRequestHeader(\'Content-type\', \'application/x-www-form-urlencoded\'); xmlHttp.send(\'username=china&password=123456\'); xmlHttp.onreadystatechange = function (ev2) { if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ alert(xmlHttp.responseText); } }; }; </script>
5、AJAX请求如何CSRF跨站请求伪造csrf_token
通过django框架，都要考虑csrf跨站请求伪造验证，不然后台就会拒绝访问，而前端报错403 。
方式一、data参数中设置
在form表单中设置{% csrf_token %} 标签，默认生成input框，且display为none隐藏
然后通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送。
1 <script> 2 $(function () { 3 $.ajax({ 4 url: \'/cookie_ajax/\', 5 type: \'POST\', 6 dataytpe: json, 7 data: { 8 \'usernamedjango基础知识之Ajax: