目录

Ajax上传文件

jQuery + formData

原生XMLHttpRequest + formData

"伪"Ajax(iframe标签+form)

原生XMLHttpRequest

使用普通的Aax发送请求需要引入JQuery，可能在一些业务上(性能上)，指定不能导入JQuery，因此只能使用原生的Ajax代码发送请求

GETfunctionAjaxGETSubmit1() {var xhr = newXMLHttpRequest();//回调函数，相当于success:

xhr.onreadystatechange = function(){//回调函数根据状态执行，状态值readyState

//0-未初始化，尚未调用open()方法；

//1-启动，调用了open()方法，未调用send()方法；

//2-发送，已经调用了send()方法，未接收到响应；

//3-接收，已经接收到部分响应数据；

//4-完成，已经接收到全部响应数据；

if (xhr.readyState == 4) {//接收服务端返回的数据

console.log(xhr.responseText)

}

};//创建连接

xhr.open('GET','/ajax1.html');

xhr.send(null)

}

POSTfunctionAjaxPOSTSubmit() {var xhr = newXMLHttpRequest();//回调函数，相当于success:

xhr.onreadystatechange = function(){//回调函数根据状态执行，状态值readyState

//0-未初始化，尚未调用open()方法；

//1-启动，调用了open()方法，未调用send()方法；

//2-发送，已经调用了send()方法，未接收到响应；

//3-接收，已经接收到部分响应数据；

//4-完成，已经接收到全部响应数据；

if (xhr.readyState == 4) {//接收服务端返回的数据

console.log(xhr.responseText)

}

};//创建连接

xhr.open('POST','/ajax1.html');//POST传递时需要，设置请求头

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');

xhr.send("p=456")

}

from django.shortcuts importrender,HttpResponsedefajax1(request):print(request.GET)print(request.POST)print(request.body)

ret= {'status':True,'message':'....'}importjsonreturn HttpResponse(json.dumps(ret))

Views

“伪”Ajax(iframe标签+form)

iframe标签可以通过不更新界面的情况下，跨域请求

方式一：

伪Ajax提交

functionAjaxSubmit() {

document.getElementById('fm').submit();

}//相当于回调函数

functionreloadIframe(ths) {//this=当前标签

//基于document来

console.log(ths);

console.log(ths.contentWindow);

console.log(ths.contentWindow.document.body.innerHTML);//基于JQuery来找

console.log($(ths).contents().find('body').html());varcontent=ths.contentWindow.document.body.innerHTML;varobj=JSON.parse(content);if(obj.status){

alert(obj.message);

}

}

方式二：(推荐)

伪Ajax提交

functionAjaxSubmit() {

document.getElementById('iframe').onload=reloadIframe;

document.getElementById('fm').submit();

}//相当于回调函数

functionreloadIframe() {varcontent= this.contentWindow.document.body.innerHTML;varobj=JSON.parse(content);if(obj.status){

console.log(obj.message)

}

}

from django.shortcuts importrender,HttpResponsedefajax1(request):print(request.GET)print(request.POST)print(request.body)

ret= {'status':True,'message':'....'}importjsonreturn HttpResponse(json.dumps(ret))

Views

Ajax上传文件

使用formData对象来封装数据

文件上传

//Jquery+formData

functionAjaxFileSubmit1() {vardata= newFormData();

data.append('k1','v1');

data.append('k2','v3');

data.append('k3',document.getElementById('img').files[0]);

$.ajax({

url:'/ajax1.html',

type:'POST',

data: data,

success:function(arg) {

console.log(arg)

},

processData:false,

contentType:false})

}//原生XMLHttpRequest

functionAjaxFileSubmit2() {vardata= newFormData();

data.append('k1','v1');

data.append('k2','v3');

data.append('k3',document.getElementById('img').files[0]);varxhr= newXMLHttpRequest();//回调函数，相当于success:

xhr.onreadystatechange= function(){//回调函数根据状态执行，状态值readyState

//0-未初始化，尚未调用open()方法；

//1-启动，调用了open()方法，未调用send()方法；

//2-发送，已经调用了send()方法，未接收到响应；

//3-接收，已经接收到部分响应数据；

//4-完成，已经接收到全部响应数据；

if(xhr.readyState== 4) {//接收服务端返回的数据

console.log(xhr.responseText);

}

};//创建连接

xhr.open('POST','/ajax1.html');

xhr.send(data);

}

from django.shortcuts importrender,HttpResponsedefajax1(request):print(request.GET)print(request.POST)print(request.FILES)

ret= {'status':True,'message':'....'}importjsonreturn HttpResponse(json.dumps(ret))

Views

iframe标签+form(推荐)

提交

functionAjaxFileSubmit() {

document.getElementById('iframe').onload=reloadIframe;

document.getElementById('fm').submit();

}//相当于回调函数

functionreloadIframe() {varcontent= this.contentWindow.document.body.innerHTML;varobj=JSON.parse(content);

console.log(obj.message)

}

jsonp

Ajax发送跨区请求，返回的响应，因为浏览器的同源策略(XMLHttpRequest支持)而被拦截，因此可以默认通过XMLHttpRequest方式发的请求是无法做到跨域请求的。

jsonp.html:1 Access to XMLHttpRequest at 'http://127.0.0.1:8002/chen.html?nid=2' from origin 'http://127.0.0.1:8001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

因此为了避免使用XMLHttpRequest能发送请求，而使用和

jsonp是一种语言规范

应用A

function submitJsonp() {

$.ajax({

url:'http://127.0.0.1:8002/chen.html',

type:'GET',

dataType:'jsonp',

//传送过去的是方法名 http://127.0.0.1:8002/chen.html？callback=list

jsonp:'callback',

jsonpCallback:'list',

})

}

function list(arg) {

console.log(arg)

}

应用B

def chen(request):

name = request.GET.get('callback')

return HttpResponse('%s("test2返回");'%(name,))