基於iframe+form偽造ajax提交功能，實現頁面不重新整理提交資料
阿新 • • 發佈：2018-12-01
直接貼程式碼看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")