知识预览
Ajax准备知识：Json
Ajax简介
JQuery实现的Ajax
JS实现的Ajax
jQuery.serialize()
上传文件
同源策略与Jsonp
Ajax准备知识：json
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。
它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
JS类型如何通过Json转换成python类型，如下图所示：
合格的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 } ???????????// 不能使用undefined4 { "name": "张三",5 ??"birthday": new Date(‘Fri, 26 Aug 2011 07:13:10 GMT‘),6 ??"getName": ?function() {return this.name;} ???// 不能使用函数和日期对象7 } strngify与parse方法
1 JSON.parse(): ????用于将一个 JSON 字符串转换为 JavaScript 对象 2 eg:3 console.log(JSON.parse(‘{"name":"Yuan"}‘));4 console.log(JSON.parse(‘{name:"Yuan"}‘)) ; ??// 错误,name没有加引号5 console.log(JSON.parse(‘[12,undefined]‘)) ; ??// 错误,json内不能有默认值6 JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。 7 eg: ?console.log(JSON.stringify({‘name‘:"egon"})) ; 和XML的比较
JSON 格式于2001年由 Douglas Crockford 提出，目的就是取代繁琐笨重的 XML 格式。
JSON 格式有两个显著的优点：书写简单，一目了然；符合 JavaScript 原生语法，可以由解释引擎直接处理，不用另外添加解析代码。所以，JSON迅速被接受，已经成为各大网站交换数据的标准格式，并被写入ECMAScript 5，成为标准的一部分。
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）。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
js实现的局部刷新
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 </head> 7 <body> 8 ?9 <a href="/get_OK/">点击</a> <span class="error"></span>10 <hr>11 ????<p>姓名 <input type="text"></p>12 ????<p>密码 <input type="password"></p>13 <p><button class="Ajax_send">Ajax_send</button><span class="login_error"></span></p>14 15 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>16 <script>17 ???$(".Ajax_send").click(function(){ ??????????????{# 给指定标签添加事件#}18 ????????{#ajax请求头的内容#}19 ????????$.ajax({20 ????????????url:"/get_ajax/", ??{#获取请求路径#}21 ????????????type:"GET", ?????????{#获取请求方式#}22 ????????????data:JSON.stringify({23 ????????????????name:$(":text").val(),24 ????????????????pwd:$(":password").val() ???{#获取用户输入的用户及密码#}25 ????????????}), ?????{#请求数据,是一个js数据,打包时会ajax会组成 ?name=yuan&pwd=123#}26 27 ????????????contentype:"application/json",28 29 ????????????success:function (data) {30 ????????????????var data=JSON.parse(data);31 ????????????????console.log(data); ?????{#data接受后台发过来的数据#}32 {# ???????????????$(".error").html(data); ?{#将views的数据传入span标签的error内#}33 ????????????????if(!data["flag"]){ ?????{#条件不满足的情况下执行以下代码#}34 ????????????????????$(".login_error").html("用户名或者密码错误")35 ????????????????}36 ????????????}37 ????????})38 ????})39 </script>40 </body>41 </html>Ajax常见的应用场景
1、当我们在百度中输入一个“老”字后，会马上出现一个和老相关的热搜关键字（这里会涉及到SEO）下拉列表！
2、在各种网站注册，当你在用户名输入完毕，切换到密码框输入时，用户名处提醒：该用户已被使用。
其实这里就使用了AJAX技术！当文件框发生了输入变化时，浏览器会使用AJAX技术向服务器发送一个请求，服务器将一个和数据库比对过后的结果返回给浏览器。
- 整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
- 当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！
Ajax的优点
1、Ajax使用JavaScript技术向服务器发送异步请求；
2、Ajax无需刷新整个页面；
3、因为服务器响应内部不再是整个页面，而是页面中的局部，所以Ajax性能高。
jQuery实现的ajax
1 {% load staticfiles %} 2 ?3 <!DOCTYPE html> 4 ?5 <html lang="en"> 6 <head> 7 ????<meta charset="UTF-8"> 8 ????<title>Title</title> 9 ????<script src="{% static ‘JS/jquery-3.1.1.js‘ %}"></script>10 </head>11 <body>12 13 <button class="send_Ajax">send_Ajax</button>14 15 <script>16 ??????//$.ajax的两种使用方式:17 18 ??????//$.ajax(settings);19 ??????//$.ajax(url,[settings]);20 21 22 ???????$(".send_Ajax").click(function(){23 24 ???????????$.ajax({25 ???????????????url:"/handle_Ajax/",26 ???????????????type:"POST",27 ???????????????data:{username:"Yuan",password:123},28 29 ???????????????success:function(data){30 ???????????????????alert(data)31 ???????????????},32 33 ?????????????????//=================== error============34 35 ????????????????error: function (jqXHR, textStatus, err) {36 37 ????????????????????????// jqXHR: jQuery增强的xhr38 ????????????????????????// textStatus: 请求完成状态39 ????????????????????????// err: 底层通过throw抛出的异常对象，值与错误类型有关40 ????????????????????????console.log(arguments);41 ????????????????????},42 43 ?????????????????//=================== complete============44 45 ????????????????complete: function (jqXHR, textStatus) {46 ????????????????????// jqXHR: jQuery增强的xhr47 ????????????????????// textStatus: 请求完成状态 success | error48 ????????????????????console.log(‘statusCode: %d, statusText: %s‘, jqXHR.status, jqXHR.statusText);49 ????????????????????console.log(‘textStatus: %s‘, textStatus);50 ????????????????},51 52 ????????????????//=================== statusCode============53 ????????????????statusCode: {54 ????????????????????‘403‘: function (jqXHR, textStatus, err) {55 ????????????????????????console.log(arguments); ?//注意：后端模拟errror方式：HttpResponse.status_code=50056 ?????????????????????},57 58 ????????????????????‘400‘: function () {59 ????????????????????}60 ????????????????}61 62 ???????????})63 64 ???????})65 66 </script>67 </body>68 </html> 1 import json,time 2 ??3 def index(request): 4 ??5 ????return render(request,"index.html") 6 ??7 def handle_Ajax(request): 8 ????username=request.POST.get("username") 9 ????password=request.POST.get("password")10 ????print(username,password)11 ????time.sleep(10)12 ?13 ????return HttpResponse(json.dumps("Error Data!"))$.ajax参数
请求参数：
1 ######################------------data---------################ 2 ?3 ???????data: 当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式 4 ?????????????(urlencoded:?a=1&b=2)发送给服务端；此外，ajax默认以get方式发送请求。 5 ?6 ?????????????function testData() { 7 ???????????????$.ajax("/test",{ ????//此时的data是一个json形式的对象 8 ??????????????????data:{ 9 ????????????????????a:1,10 ????????????????????b:211 ??????????????????}12 ???????????????}); ??????????????????//?a=1&b=213 ######################------------processData---------################14 15 processData：声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false，16 ?????????????那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString()17 ?????????????,最后得到一个［object，Object］形式的结果。18 ????????????19 ######################------------contentType---------################20 21 contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。22 ?????????????用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据，23 ?????????????比如contentType:"application/json"，即向服务器发送一个json字符串：24 ???????????????$.ajax("/ajax_get",{25 ?????????????26 ??????????????????data:JSON.stringify({27 ???????????????????????a:22,28 ???????????????????????b:3329 ???????????????????}),30 ???????????????????contentType:"application/json",31 ???????????????????type:"POST",32 ?????????????33 ???????????????}); ?????????????????????????//{a: 22, b: 33}34 35 ?????????????注意：contentType:"application/json"一旦设定，data必须是json字符串，不能是json对象36 37 38 ######################------------traditional---------################39 40 traditional：一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]},41 ??????????????traditional为false会对数据进行深层次迭代； ?Django-Ajax
原文地址：http://www.cnblogs.com/bingpan/p/7830870.html