目录
Ajax简单介绍
假如用户输入的格式不对,那么我们就应该在模态对话框相应输入框:提示报错,
但是,哪怕用户输入格式错了,只要提交,后台判断个数错误,返回给客户,但是模态对话框根本就没有url指向,所以返回给用户的页面,模态对话框是隐藏状态,所以错误提示没办法显示在模态对话框。
Ajax就是为了解决上面的问题的一套工具,可以不刷新页面情况下悄悄进行提交数据,后台悄悄的响应数据,然后可以进行数据应用
Ajax(jQuery)
实战Django之Ajax(jQuery)前后端交互:https://blog.csdn.net/Burgess_zheng/article/details/86548407
-
Ajax请求方式和参数介绍
jQuery.get(...)
所有参数:
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
success: 载入成功时回调函数。
dataType: 返回内容格式,xml, json, script, text, html
jQuery.post(...)
所有参数:
url: 待载入页面的URL地址
data: 待发送 Key/value 参数
success: 载入成功时回调函数
dataType: 返回内容格式,xml, json, script, text, html
jQuery.getJSON(...)
所有参数:
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
success: 载入成功时回调函数。
jQuery.getScript(...)
所有参数:
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
success: 载入成功时回调函数。jQuery.ajax(...)
部分参数:
url:请求地址
type:请求方式,GET、POST(1.9.0之后用method)
headers:请求头
data:要发送的数据
contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
async:是否异步
timeout:设置请求超时时间(毫秒)
beforeSend:发送请求前执行的函数(全局)
complete:完成之后执行的回调函数(全局)
success:成功之后执行的回调函数(全局)
error:失败之后执行的回调函数(全局)
accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型
dataType:将服务器端返回的数据转换成指定类型
"xml": 将服务器端返回的内容转换成xml格式
"text": 将服务器端返回的内容转换成普通文本格式
"html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。
"script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式
"json": 将服务器端返回的内容转换成相应的JavaScript对象
"jsonp": JSONP 格式(使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数)
如果不指定,jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a stringconverters: 转换器,将服务器端的内容根据指定的dataType转换类型,并传值给success回调函数
$.ajax({
accepts: {
mycustomtype: 'application/x-some-custom-type'
},
// Expect a `mycustomtype` back from server
dataType: 'mycustomtype'// Instructions for how to deserialize a `mycustomtype`
converters: {
'text mycustomtype': function(result) {
// Do Stuff
return newresult;
}
},
});
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="add_form" method="POST" action="/submit/ajax/"> {% csrf_token %} <a id="csrf" style="display: none">{{ csrf_token }}</a> <input type="text" name="hostname" style="display: block"> <input type="text" name="ip" style="display: block"> <input type="text" name="port" style="display: block"> <input type="text" name="b_id" style="display: block"> <input type="submit" name="submit提交"> <input id="ajax_submit" type="button" value="ajax提交"> <span id="error_msg" style="color: red"></span> </form> <script src="/static/jquery.min.js"></script> <script> $('#ajax_submit').click(function () { $.ajax({ url:"/submit/ajax/", type:'POST', //data:{'user':123,'host_list':{'key':'value','key':'value'}}, //如果data提交的数据的字典里面的key的value是字典提交会报错如上: // 需要设置下面的参数: //traditional:true, //data:{'hostname':$('#host').val(), // 'ip':$('#ip').val(), // 'port':$('#port').val(), // 'b_id':$('#sel').val() // }, data:$('#add_form').serialize(), //ajax的data发送数据的时候可以一条命令解决==上面data发送的简写 //只要匹配的from标签. serialize(), 该form标签的所有name的值都会发送过去 headers:{'X-CSRFtoken':$('#csrf').text()}, dataType:'JSON', //之前我们都需要在succses参数的function内里写Json.parse(data)对后端响应的数据字符串反序列化 //如果写上 dataType:'JSON',自动把接收数据进行反序列化,succses参数的function内就无需进行反序列化 //发送指定接收路径,请求类型,数据给后台,然后进入等待状态 //直到收到后台的数据才执行下面的函数 success: function(data){ //var data = JSON.parse(data); //JSON.parse(data):把字符串转换成(反序列化)对象 //由于我们dataType参数设置了自动反序列化数据这里就注释掉 //如a =[1,2,3,4] //JSON.stringigy(a):把对象转换成(序列化)字符串 if(data.status){ location.reload(); //假如该status(key)的值是true,就为真,重新刷新页面 //对象就可以用点.取值 //提交后台判断成功之后的一些列操作 }else { //否则在匹配的标签添加内容 console.log(data); $('#error_msg').text(data.error); } }, error:function () { //出现未知的情况才执行这个函数,succses是只要发送到后台就算成功,获取错误信息返回给用户,成功后的事 } }) }); //简单的写法(推荐上面的写法) //$.get(url="xx",data{},susccess:function(data){if....} // $.post(url="xx",data{},susccess:function(data){if....} // $.getJson(....} </script> </body> </html>
-
ajax提交内添加csrf_token
涉及到csrf跳转:Django之CSRF XSS原理解析 https://blog.csdn.net/Burgess_zheng/article/details/86548425
方式1(获取csrf进行请求头发送)
<script src="/static/jquery.min.js"></script> <script src="/static/jquery.cookie.js"></script> <script> $('#ajax').click(function(){ $.ajax({ url:'/login/', type:"POST", dataType:'JSON', tradionale:true, headers:{'X-CSRFtoken':$.cookie('csrftoken')}, //请求头提交csrftoken data:{'user':'root','pwd':'123'}, success:function (obj) { } }) }) }) </script>
方式2(前端添加一个自动函数,所有ajax提交之前都会执行该函数先进行提交csrf)
<script src="/static/jquery.min.js"></script> <script src="/static/jquery.cookie.js"></script> <script> $(function(){ function csrfSafeMethod(method){ return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)) } $(function(){ $.ajaxSetup({ beforeSend:function (xhr,settings) { if(!csrfSafeMethod(settings.type) && !this.crossDomain) xhr.setRequestHeader('X-CSRFtoken',$.cookie('csrftoken')) } }) }); //在执行ajax前会先执行$.ajaxSetup函数 //settings该形参是接收ajax提交的时候获取到该ajax提交所有数据 //获取了以后进行判断请求类型是什么传参进行判断 //如果是POST就先在ajax发送前先执行该ajaxSetup $('#ajax').click(function(){ $.ajax({ url:'/login/', type:"POST", dataType:'JSON', tradionale:true, //headers:{'X-CSRFtoken':$.cookie('csrftoken')}, data:{'user':'root','pwd':'123'}, success:function (obj) { } }) }) }) </script>
原生ajax(XMLHttpRequest)
Jquery内部调用的就是XMLHttpRequest发的ajax操作
之前为什么推荐jquery用1.x版本的,而不用2.x版本的或者3.x版本的
因为XMLHttpRequest是浏览器的一个对象,不是在所有的浏览器上都有的
如微软系列有另外一个替代XMLHttpRequest,所以像IE6.7.8版本的浏览器就没有这么一个对象.
Jquery会1.X版本你$.ajax会自动识别浏览器如果有XMLHttpRequest创建,如果没有就自动调用另外一个来替代,2.x 3.x版本就放弃了low版本只支持XMLHttpRequest
我们只学一个XMLHttpRequest是不行的
-
XMLHttpRequestajax请求方式和参数介绍
#python创建对象
b = 类()#jquery创建对象
b = new XMLHttpRequest()#XmlHttpRequest对象的主要方法:
a. void open(String method,String url,Boolen async)
用于创建请求
参数:
method: 请求方式(字符串类型),如:POST、GET、DELETE...
url: 要请求的地址(字符串类型)
async: 是否异步(布尔类型)
b. void send(String body)
用于发送请求
参数:
body: 要发送的数据(字符串类型)
c. void setRequestHeader(String header,String value)
用于设置请求头
参数:
header: 请求头的key(字符串类型)
vlaue: 请求头的value(字符串类型)
d. String getAllResponseHeaders()
获取所有响应头
返回值:
响应头数据(字符串类型)
e. String getResponseHeader(String header)
获取响应头中指定header的值
参数:
header: 响应头的key(字符串类型)
返回值:
响应头中指定的header对应的值
f. void abort()
终止请求#XmlHttpRequest对象的主要属性:
a. Number readyState
状态值(整数)
详细:
0-未初始化,尚未调用open()方法;
1-启动,调用了open()方法,未调用send()方法;
2-发送,已经调用了send()方法,未接收到响应;
3-接收,已经接收到部分响应数据;
4-完成,已经接收到全部响应数据;
b. Function onreadystatechange
当readyState的值改变时自动触发执行其对应的函数(回调函数)
c. String responseText
服务器返回的数据(字符串类型)
d. XmlDocument responseXML
服务器返回的数据(Xml对象)
e. Number states
状态码(整数),如:200、404...
f. String statesText
状态文本(字符串),如:OK、NotFound...示例: