AJAX
一、JSON什么是 JSON ?
*?JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。
合格的json对象: ["one","two","three"] { "one": 1,"two": 2,"three": 3 } {"names": ["张三","李四"] } [ { "name": "张三"},{"name": "李四"} ] ?不合格的json对象: { name: "张三",‘age‘: 32 } // 属性名必须使用双引号 [32,64,128,0xFFF] // 不能使用十六进制值 { "name": "张三","age": undefined } // 不能使用undefined { "name": "张三","birthday": new Date(‘Fri,26 Aug 2011 07:13:10 GMT‘),"getName": function() {return this.name;} // 不能使用函数和日期对象 } 二、AJAX简介AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。 AJAX 不是新的编程语言,而是一种使用现有标准的新方法。AJAX是使用js的技术发请求的一个方式 特点: 异步 页面局部刷新 传输的数据量小 AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
AJAX的优点
三、JS实现ajax1 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 }; 四、Jquery实现ajax请求参数$.ajax({ url: ‘/ajax_test/‘,# 请求的地址 type: ‘post‘,# 请求的方式 data: { # 请求的数据 name: ‘alex‘,age: ‘73‘,hobby: JSON.stringify([‘吃烧饼‘,‘画大饼‘,‘卖烧饼‘]) },success: function (res) { # 正常响应的回调函数 $(‘[name="ii3"]‘).val(res) },error:function (res) { # 错误响应的回调函数 console.log(res) } }) 五、AJAX请求如何设置csrf_token方式一通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送。 页面中使用{% csrf_token %},给POST提交数据中添加csrfmiddlewaretoken的键值对 data: { ‘csrfmiddlewaretoken‘: $(‘[name="csrfmiddlewaretoken"]‘).val(),i1: $(‘[name="i1"]‘).val(),i2: $(‘[name="i2"]‘).val() }, 方式二通过获取返回的cookie中的字符串 放置在请求头中发送。添加X-csrftoken的请求头 注意:需要引入一个jquery.cookie.js插件。 $.ajax({ url: "/cookie_ajax/",type: "POST",headers: {"X-CSRFToken": $.cookie(‘csrftoken‘)},// 从Cookie取csrftoken,并设置到请求头中 data: {"username": "Q1mi","password": 123456},success: function (data) { console.log(data); } }) 每一次都这么写太麻烦了,可以使用$.ajaxSetup()方法为ajax请求统一设置。 function csrfSafeMethod(method) { // these HTTP methods do not require CSRF protection return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); } $.ajaxSetup({ beforeSend: function (xhr,settings) { if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken",csrftoken); } } }); 注意: 如果使用从cookie中取csrftoken的方式,需要确保cookie存在csrftoken值。 如果你的视图渲染的HTML文件中没有包含 {% csrf_token %},Django可能不会设置CSRFtoken的cookie。 这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie。 django.views.decorators.csrf import ensure_csrf_cookie
@ensure_csrf_cookie
def login(request):
pass
AJAX上传文件// 上传文件示例 $("#b3").click(function () { var formData = new FormData(); formData.append("csrfmiddlewaretoken",$("[name=‘csrfmiddlewaretoken‘]").val()); formData.append("f1",$("#f1")[0].files[0]); $.ajax({ url: "/upload/",processData: false,// 告诉jQuery不要去处理发送的数据 contentType: false,// 告诉jQuery不要去设置Content-Type请求头 data: formData,success:function (data) { console.log(data) } }) }) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |