JavaScript 偽Ajax請求
阿新 • • 發佈：2020-09-15
偽Ajax
通過iframe以及form表單，可以實現偽Ajax的方式。
並且它的相容性是最好的。
iframe
iframe標籤能夠獲取一個其他頁面的文件內容，這說明它內部肯定是傳送了一個請求，並且收到後端的資料展示在頁面上。
基於這一點，我們可以讓他與form表單做一個結合使用。
<iframe src="http://www.baidu.com//" frameborder="0"></iframe>
結合使用
首先form表單中有一個target屬性，我們需要為iframe取一個名字。並且讓target屬性與iframe做繫結。
至於提交方式與提交的資料，均是form
注意：如果要上傳檔案，一定要指定
enctype為multipart/form-data，否則後端Django不會將檔案存放進request.FILES中。
<iframe name="ajax"></iframe> <form action="http://127.0.0.1:8000/" method="POST" target="ajax" enctype="multipart/form-data" > <p><input type="text" name="username"></p> <p><input type="text" name="password"></p> <p><input type="file" name="userfile"></p> <p><button type="submit">提交</button></p> </form>
def test(request): if request.method == "POST": print(request.POST) # <QueryDict: {'username': ['Yunya'], 'password': ['123']}> print(request.FILES) # <MultiValueDict: {'userfile': [<InMemoryUploadedFile: django-orm單表練習.gif (image/gif)>]}> return HttpResponse("ok") else: print(request.GET) return render(request,"base.html",locals())
回撥函式
現在我們需要為iframe繫結一個回撥函式，當iframe中有內容時則取出來。
同時我們還要讓iframe的高度為0，讓頁面感知不到我們是在用偽Ajax在傳送請求。
<body>
<iframe name="ajax" style="display: none;"></iframe>
<form action="http://127.0.0.1:8000/" method="POST" target="ajax" enctype="multipart/form-data" >
<p><input type="text" name="username"></p>
<p><input type="text" name="password"></p>
<p><input type="file" name="userfile"></p>
<p><button type="submit">提交</button></p>
</form>
</body>
<script>
window.onload = () => {
document.getElementsByName("ajax")[0].addEventListener("load",function(ele){
let result = this.contentWindow.document.body.innerHTML; // 獲取iframe中的內容
console.log(result);
})
}
</script>
def test(request):
if request.method == "POST":
print(request.POST) # <QueryDict: {'username': ['Yunya'], 'password': ['123']}>
print(request.FILES) # <MultiValueDict: {'userfile': [<InMemoryUploadedFile: django-orm單表練習.gif (image/gif)>]}>
return HttpResponse("ok")
else:
print(request.GET)
return render(request,"base.html",locals())
後期思路
你可以在後面圍繞上面知識點做一個元件。我這裡就懶得寫了，具體思路如下：
1.使用
Js創建出iframe標籤，以及form表單，但是不向body中進行新增。2.根據引數，來選定
form中的enctype。3.根據提交的資料長度，來生成
input框在form表單中，並且生成對應的name及value。4.根據引數，來設定
form中的method以及action屬性。5.自己做一個回撥函式