JavaScript 偽Ajax請求

偽Ajax

　　 通過iframe以及form表單，可以實現偽Ajax的方式。

　　 並且它的兼容性是最好的。

iframe

　　 iframe標籤能夠獲取一個其他頁面的文檔內容，這說明它內部肯定是發送了一個請求，並且收到後端的數據展示在頁面上。

　　 基於這一點，我們可以讓他與form表單做一個結合使用。

<iframe src="//www.baidu.com//" frameborder="0"></iframe>

　　 image-20200915180122795

結合使用

　　 首先form表單中有一個target屬性，我們需要為iframe取一個名字。並且讓target屬性與iframe做綁定。

　　 至於提交方式與提交的數據，均是form表單中的內容。

　　 注意：如果要上傳文件，一定要指定enctype為multipart/form-data，否則後端Django不會將文件存放進request.FILES中。

<iframe name="ajax"></iframe>
<form action="//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="//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())

　　 偽造Ajax

後期思路

　　 你可以在後面圍繞上面知識點做一個組件。我這裡就懶得寫了，具體思路如下：

　　 1.使用Js創建出iframe標籤，以及form表單，但是不向body中進行添加。

　　 2.根據參數，來選定form中的enctype。

　　 3.根據提交的數據長度，來生成input框在form表單中，並且生成對應的name及value。

　　 4.根據參數，來設定form中的method以及action屬性。

　　 5.自己做一個回調函數

Tags:

VirMach 便宜 VPS

QNews

QNews