直接贴代码看ajax4代码就行:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax请求的几种方式</title>
</head>
<body>
<p><button id="jQueryAjax" onclick="ajax1()">Query Ajax</button></p>
<p><button id="XHRAjax1" onclick="ajax2()">XMLHttpRequest Ajax GET</button></p>
<p><button id="XHRAjax2" onclick="ajax3()">XMLHttp Request Ajax POST</button></p>
{#<iframe style="width: 400px; height: 300px" name="frame" onload="reloadiframe(this)"></iframe>#}
{#onload在提交函数中绑定#}
<iframe style="width: 400px; height: 300px" name="frame" id="myiframe"></iframe>
<form action="/ajax4/" method="post" target="frame" id="iframeform">
<p>username:<input type="text"></p>
{# <p><input type="submit" value="ajax4基于iframe+form模拟Ajax提交"> </p>#}
<p><input type="button" onclick="ajax4(this)" value="ajax4基于iframe+form模拟Ajax提交"> </p>
</form>
<span id = "mytext"></span>
{% csrf_token %}
{#<iframe style="width: 800px;height: 600px" src="http://www.qq.com"></iframe>#}
<script src="/static/jquery-3.3.1.min.js"></script>
<script>
function ajax4(ths) {
//在form提交前执行iframe onload动作(接收返回数据)
document.getElementById("myiframe").onload = reloadiframe
$("#iframeform").submit()
}
function reloadiframe(){
var args = this.contentWindow.document.body.innerHTML;
console.log(args);
//解析回调内容
obj = JSON.parse(args)
if(obj.status){
$("#mytext").html(obj.msg)
}
}
//jquery ajax
function ajax1() {
$.ajax({
url:"/ajax1",
data:{"name":123},
type:"GET",
success:function (arg) {
console.log(arg)
}
});
}
//原生XMLHttpRequest GET方式请求
function ajax2(){
//获取XMLHttpRequest对象
var xlr = new XMLHttpRequest();
//提前设置返回状态改变时如何接收数据
xlr.onreadystatechange=function () {
//状态4表示数据返回
if(xlr.readyState==4){
console.log(xlr.responseText);
}
};
//设置发送方式和url
xlr.open("GET","/ajax2?name=raylu");
//发送
xlr.send();
}
//原生XMLHttpRequest POST方式请求
function ajax3(){
//获取XMLHttpRequest对象
var xlr = new XMLHttpRequest();
//提前设置返回状态改变时如何接收数据
xlr.onreadystatechange=function () {
//状态4表示数据返回
if(xlr.readyState==4){
console.log(xlr.responseText);
}
};
//设置发送方式和url
xlr.open("POST","/ajax3/");
//POST方式提交需要设置请求头
xlr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset-UTF-8');
//发送12
xlr.send("name=raylu");
}
</script>
</body>
</html>
后台views.py,看ajax4代码就行:
from django.shortcuts import render,HttpResponse
def view(request):
return render(request,"index.html")
# Create your views here.
#通过jQuery请求
def ajax1(request):
if request.method=="POST":
print(request.POST)
return HttpResponse("123")
else:
print(request.GET)
return HttpResponse("456")
#通过原生的XMLHttpRequest进行GET请求
def ajax2(request):
if request.method=="POST":
print(request.POST)
return HttpResponse("123")
else:
print(request.GET)
return HttpResponse("456")
#通过原生的XMLHttpRequest进行POST请求
def ajax3(request):
if request.method=="POST":
print(request.POST)
return HttpResponse("123")
elif request.method=="GET":
print(request.GET)
return HttpResponse("456")
#基于iframe+form伪造ajax成功,实现页面不刷新提交数据
def ajax4(request):
if request.method=="POST":
print(request.POST)
ret = {"status":True,"msg":"基于iframe+form伪造ajax成功,实现页面不刷新提交数据"}
import json
ret = json.dumps(ret)
return HttpResponse(ret)
elif request.method=="GET":
print(request.GET)
return HttpResponse("456")