XMLHttpRequest---Ajax---Iframe伪Ajax(不刷新页面的前提下，前端与后端通信)

>>>index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <p>1.Ajax GET请求</p>
        username = <input type="text">
        password = <input type="text">
        <input type="button" value="Ajax提交"  onclick="AjaxGET()" >
        <input type="button" value="XmlAjax提交" onclick="XmlAjaxGET()">
    </div>

    <div>
        <p>2.Ajax  POST请求</p>
        username = <input type="text">
        password = <input type="text">
        <input type="button" value="Ajax提交"  onclick="AjaxPOST()" >
        <input type="button" value="XmlAjax提交" onclick="XmlAjaxPOST()">
    </div>

    <div>
        <p>3.iframe请求</p>
        <p>基于iframe+form表单</p>
        <iframe id="iframe" name="ifra" frameborder="1"></iframe>
        <form action="/ajax/" method="POST" id="fm" target="ifra">
            <input type="text" name="root" value="1111">
            <a onclick="AjaxSubmit()">提交</a>
        </form>
    </div>

    <div>
        <div>
            <input id="url" type="text" placeholder="请输入url"><a onclick="test()">查看</a>
        </div>
        <iframe id="iframe11" style=" 600px;height: 300px" src="http://baidu.com.cn" frameborder="0"></iframe>

    </div>


<script src="/static/js/jquery-3.3.1.js"></script>
<script>
    

    
    function AjaxSubmit() {
        document.getElementById('iframe').onload = reload;
        document.getElementById('fm').submit()
    }

    function reload() {
        {#console.log(self);#}
        {#console.log(self.contentWindow.document.body.innerHTML);#}
        {#console.log($(self).contents().find('body').html())#}
        {#var content = $("#iframe").contents().find('body').html();#}
        var content = this.contentWindow.document.body.innerHTML;
        var obj =JSON.parse(content);
        if(obj.status){
            alert(obj.message);
        }
    }

    function test() {
        var url =$("#url").val();
        $("#iframe11").attr('src',url)

    }
    
    function AjaxGET() {
        $.ajax({
            url:'/ajax/',
            type:'GET',
            data:{key:'ajaxget请求'},
            success:function (args) {
            }
        })

    }

    function XmlAjaxGET() {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
             if(xhr.readyState == 4){
                console.log(xhr.responseText);
             }
        };
        xhr.open('GET','/ajax/?p=xmlget请求');
        xhr.send(null);

    }

    function AjaxPOST() {
        $.ajax({
            url:'/ajax/',
            type:'POST',
            data:{key:'ajaxpost请求'},
            success:function (args) {
            }
        })

    }

    function XmlAjaxPOST() {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
             if(xhr.readyState == 4){
                console.log(xhr.responseText);
             }
        };
        xhr.open('POST','/ajax/');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
        xhr.send('p=123');
    }

</script>

</body>
</html>

>>>views
def index(request):

    return render(request,'index.html',locals())

def ajax(request):
    print(request.POST)
    print(request.GET)
    print(request.body)
    ret = {'status':True,'message':'....'}
    import json
    return HttpResponse(json.dumps(ret))
XMLHttpRequest---Ajax---Iframe伪Ajax(不刷新页面的前提下，前端与后端通信)

相关推荐
