基于iframe+form伪造ajax提交功能，实现页面不刷新提交数据

直接贴代码看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")

基于iframe+form伪造ajax提交功能，实现页面不刷新提交数据

猜你喜欢