前端往后端发送数据的几种方法
Posted tangkaishou
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端往后端发送数据的几种方法相关的知识，希望对你有一定的参考价值。
先来谈谈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...
**原生jquery XMLHttpRequest 生成对象;
什么情况需要写原生jquery 例如:手机 手机流量缺失就不会先加载jquery
‘GET‘请求 function AjaxSubmit2() { var xhr = new XMLHttpRequest(); //设置回调函数 xhr.onreadystatechange = function (ev) { if (xhr.readyState == 4){ //接收完毕服务器返回的数据 console.log(xhr.responseText); } }; xhr.open(‘GET‘,‘/ajax1?p=123‘); xhr.send(null) } ‘POST‘请求 带上请求头 setRequestHeader function AjaxSubmit2() { var xhr = new XMLHttpRequest(); //设置回调函数 xhr.onreadystatechange = function (ev) { if (xhr.readyState == 4){ //接收完毕服务器返回的数据 console.log(xhr.responseText); } }; xhr.open(‘POST‘,‘/ajax1?p=123‘); xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset-UTF-8‘); xhr.send(‘P=234‘) }
下面介绍一下 伪Ajax
Iframe+form 实现
其利用 iframe 【不刷新的特性】 和 form 【提交数据的特性】
<iframe id="iframe" name="ifra"></iframe> <form id="fm" action="/ajax1.html" method="POST" target="ifra"> <input name="root" value="111111" /> <input type=‘submit‘ value=‘提交‘> </form>
什么时候iframe才开始取数据呢？引出第二种方法
当点击提交的时候才绑定事件
<iframe id="iframe" name="ifra"></iframe> <form id="fm" action="/ajax1.html" method="POST" target="ifra"> <input name="root" value="111111" /> <a onclick="AjaxSubmit5()">提交</a> </form> function AjaxSubmit5() { document.getElementById(‘iframe‘).onload = reloadIframe; //在数据提交之间绑定事件 document.getElementById(‘fm‘).submit(); } function reloadIframe() { // this=当前标签 //console.log(ths); //console.log(ths.contentWindow); //console.log(ths.contentWindow.document.body.innerHTML); //console.log($(ths).contents().find(‘body‘).html()); var content = this.contentWindow.document.body.innerHTML; var obj = JSON.parse(content); //转换成对象 对象ret = {‘status‘:‘‘,‘message‘:‘‘} if(obj.status){ alert(obj.message); } }
再来介绍一下ajxa
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 string
converters： 转换器，将服务器端的内容根据指定的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;
}
},
});
jQuery Ajax 方法列表
第二部分 通过ajax上传文件
1.JQuery
2.原生 XMLHttpRequest(send)
以上两种方式可利用formData对象，来封装用户提交的数据
3.Iframe+Form
<input type="file" id=‘img‘> 1.formdata function AjaxSubmit6() { //document.getElementById(‘img‘)[0] var data = new FormData(); data.append(‘k1‘,‘v1‘); data.append(‘k2‘,‘v2‘); data.append(‘k3‘,document.getElementById(‘img‘).files[0]); $.ajax({ url: ‘/ajax1.html‘, type: ‘POST‘, data:data, //本来这里是写字典的 ******现在用高级的方法**** success:function (arg) { console.log(arg) }, //需要加上这两个参数 //这两个参数告诉jquery不用帮我处理数据 直接上传就行啦 processData: false, // tell jQuery not to process the data contentType: false // tell jQuery not to set contentType }) }
2.formdata 可以帮忙封装数据 包括文件对象
function AjaxSubmit7() {
var data = new FormData();
data.append(‘k1‘,‘v1‘);
data.append(‘k2‘,‘v2‘);
data.append(‘k3‘,document.getElementById(‘img‘).files[0]);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
// 接收完毕服务器返回的数据
console.log(xhr.responseText);
}
};
xhr.open(‘POST‘,‘/ajax1.html‘);
xhr.send(data);
}
3.Iframe+Form 的上传文件 <iframe style="display: none" id="iframe1" name="ifra1"></iframe> <form id="fm1" action="/ajax1.html" method="POST" enctype="multipart/form-data" target="ifra1"> <input type="text" name="k1" /> <input type="text" name="k2" /> <input type="file" name="k3" /> <a onclick="AjaxSubmit8()">提交</a> </form> function AjaxSubmit8() { document.getElementById(‘iframe1‘).onload = reloadIframe1; document.getElementById(‘fm1‘).submit(); } function reloadIframe1() { var content = this.contentWindow.document.body.innerHTML; var obj = JSON.parse(content); console.log(obj); }
总结:用哪种方法？ 目前都可以用formData 考虑低版本就是iframe+Form(兼容性强)
第三部分：跨域Ajax------------------>JSONP
什么叫跨域:
由于浏览器存在同源策略机制，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。
特别的：由于同源策略是浏览器的限制，所以请求的发送和响应是可以进行，只不过浏览器不接受罢了。
浏览器同源策略并不是对所有的请求均制约：
- 制约： XmlHttpRequest
- 不制约： img、iframe、script等具有src属性的标签
跨域，跨域名访问，如：http://www.c1.com 域名向 http://www.c2.com域名发送请求。
解决方法:
巧妙的机制:JSONP(是一种方式 script+后端返回方法名+不断添加删除子标签
JSONP:
利用创建script块，在期中执行src属性为：远程url
由网站后端 提供一个函数返回值
function 函数(arg){
}
第一种: 利用script的src特性 可以跨域访问 后端返回函数 ----手动
view.py def jsonp(request): return HttpResponse("func(‘我要上鸭王‘)"); #返回一个函数 .html function submitJsonp3() { var tag = document.createElement(‘script‘); tag.src = ‘http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&tt=1454376870403‘; document.head.appendChild(tag); document.head.removeChild(tag); } # 写一个后端返回同名的函数 function func(arg) { console.log(arg); }
第一种要自己写 ---------->引出第二种
第二种 JQuery 自动 生成script标签 但是拿到返回值就删除这个标签
view.py
def jsonp(request):
return HttpResponse("func(‘我要上鸭王‘)"); #返回一个函数
test.html
function submitJsonp4() {
$.ajax({
url: ‘http://127.0.0.1:9000/xiaokai.html‘,
type: ‘POST‘,
dataType: ‘jsonp‘,
})
}
# 写一个后端返回同名的函数
function func(arg) {
console.log(arg);
}
第二种还有缺陷？我怎么知道后端返回的函数名
引出第三种 把函数放在访问url中
function submitJsonp4() {
$.ajax({
url: ‘http://127.0.0.1:9000/xiaokai.html?callback=func‘,
type: ‘GET‘,
dataType: ‘jsonp‘,
})
}
# 写一个后端返回同名的函数
function func(arg) {
console.log(arg);
}
但是这个还不够好 这里有个别人写好的
*******************引出别人写好的*****************************
def view(request):
callback = request.GET.get(‘callback‘)
return HttpResponse(‘%s("我要上鸭王")‘ %(callback,));
function submitJsonp4() {
$.ajax({
url: ‘http://127.0.0.1:9000/xiaokai.html‘,
type: ‘GET‘, //写post 没有用 只能发get
dataType: ‘jsonp‘,
jsonp: ‘callback‘, //告诉后台这个key
jsonpCallback: ‘func‘ //要返回这个函数名 ******
})
}
function func(arg) {
console.log(arg);
}
以上是关于前端往后端发送数据的几种方法的主要内容，如果未能解决你的问题，请参考以下文章