发送不同ajax请求以及iframe

最新推荐文章于 2022-05-09 09:51:40 发布
banjiaobian1922
最新推荐文章于 2022-05-09 09:51:40 发布
阅读量143
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/wenghao/p/11497251.html
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        .btn{
            display: inline-block;
            padding: 5px 10px;
            background-color: coral;
            color: white;
        }
    </style>
<body>

<h1>Ajax全套</h1>
<h3>1.Ajax发送GET请求</h3>
<div>
    <a class="btn" οnclick="AjaxSubmit1();">点我</a>
    <a class="btn" οnclick="AjaxSubmit2();">点我</a>
{#    不依赖jeqery的submit#}
</div>

<div>
    <a class="btn" οnclick="AjaxSubmit3();">点我</a>
    <a class="btn" οnclick="AjaxSubmit4();">点我</a>
{#    不依赖jeqery的submit#}
</div>

<h3>2.Ajax发送POST请求</h3>
<div>
    <a class="btn" οnclick="AjaxSubmit5();">点我</a>
</div>

<h3>3.莆田</h3>
<div>
{#    <h6>学习iframe</h6>#}
{#    <div>#}
{#        <input id="url" placeholder="请输入URL"> <a οnclick="Test1();">查看</a>#}
{#    </div>#}
{#    <iframe id="iframe" src="http://www.autohome.com.cn" style="height: 800px;width: 600px"></iframe>#}
    <h6>基于iframe+Form表单提交</h6>
    <iframe id="iframe" name="ifra"></iframe>{#    onload表示加载时让其执行#}
{#    返回的回调函数没有使用，而是直接写到iframe的框里面了#}
    <form id="fm" action="/ajax1.html/" method="post" target="ifra">{#target="ifra"和目标绑定iframe，必须是name的值#}
{#页面返回的值会放在iframe中#}
        <input name="root" value="111111">
        <a οnclick="AjaxSubmit5();">提交</a>
    </form>
</div>

<h3>4.文件上传</h3>
<input type="file" id="img">
<a class="btn" οnclick="AjaxSubmit6();">上传</a>
<a class="btn" οnclick="AjaxSubmit7();">上传</a>

    <iframe style="display: none" id="iframe1" name="ifra1"></iframe>{#    onload表示加载时让其执行#}
    {#    返回的回调函数没有使用，而是直接写到iframe的框里面了#}
    <form id="fm1" action="/ajax1.html/" method="post" enctype="multipart/form-data" target="ifra1">{#target="ifra"和目标绑定iframe，必须是name的值#}
    {#页面返回的值会放在iframe中#}
        <input type="text" name="k1">
        <input type="text" name="k2">
        <input type="file" name="k3">
        <a οnclick="AjaxSubmit8();">提交</a>
    </form>

<script src="/static/js/jquery-3.1.1.js"></script>
<script>
{#    function funcName(arg) {#}
{#        //this=window#}
{#        //arg=当前标签#}
{#    }#}
{#    function funcName() {#}
{#        //this 当前标签#}
{#    }#}
{#    document.getElementsById('iframe').οnclick=funcName;#}

    function Test1() {
        var url=$('#url').val();
        $('#iframe').attr('src',url);
    }

    function AjaxSubmit1() {
        $.ajax({
            url:'/ajax1.html',
            type:'GET',
            data:{'p':123},
            success:function (arg) {

            }
        })
    }
    function AjaxSubmit2() {
{#        创建对象的时候必须加new关键字,jequery是基于xml的一种方式#}
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4){
                //接收完毕服务器返回的数据，当每次执行完时值都会改变
                console.log(xhr.responseText);
            }
        };

{#        onreadystatechange状态发生更改时会执行，这里要关注全部返回完毕要做的事情。回调函数要在send前配置，不然发时不知道回来找谁#}
         xhr.open('GET','/ajax1.html?p=123');
{#        与谁创建连接，以什么方式#}
        xhr.send(null);
{#        get形式提交就什么都不用放#}
    }

    function AjaxSubmit3() {
        $.ajax({
            url:'/ajax1.html',
            type:'POST',
            data:{'p':123},
            success:function (arg) {

            }
        })
    }
    function AjaxSubmit4() {
{#        创建对象的时候必须加new关键字,jequery是基于xml的一种方式#}
        var xhr=new XMLHttpRequest();

        xhr.onreadystatechange=function () {
            if(xhr.readyState==4){
                //接收完毕服务器返回的数据，回调函数
                console.log(xhr.responseText);
            }
        };
        xhr.open('POST','/ajax1.html/');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
{#        <发送post请求记得携带请求头</发送post请求记得携带>必须把这个带上，把请求从body中转换到post里面#}
        xhr.send("p=456");
{#        这时的内容放在request.body中#}
    }

    function AjaxSubmit5() {
        document.getElementById('iframe').οnlοad=reloadIframe;
        document.getElementById('fm').submit();
    }
    function reloadIframe() {{#  获取iframe内容并打印#}
        console.log(this);
{#        console.log(ths.contentWindow)#}
{#        console.log(ths.contentWindow.document.body.innerHTML)#}
{#        进入iframe的框中，打印其中内容#}
{#        console.log($(ths).contents().find('body').html())#}
{#        juqery方式查找#}
        var content=this.contentWindow.document.body.innerHTML;
        var obj=JSON.parse(content);{# 把字符串转换为对象#}
        if(obj.status){
            alert(obj.message);
        }
    }
{#a. Number readyState#}
{#   状态值（整数）#}
{# #}
{#   详细：#}
{#      0-未初始化，尚未调用open()方法；#}
{#      1-启动，调用了open()方法，未调用send()方法；#}
{#      2-发送，已经调用了send()方法，未接收到响应；#}
{#      3-接收，已经接收到部分响应数据；#}
{#      4-完成，已经接收到全部响应数据；#}

    function AjaxSubmit6() {
        var data=new FormData();
        data.append('k1','v1');
        data.append('k2','v2');
        data.append('k3',document.getElementById('img').files[0]);
        $.ajax({
            url:'/ajax1.html/',
            type:'POST',
            data:data,
            success:function (arg) {
                console.log(arg);
            },
            //如果用formdata这种需要添加俩个参数,直接发送内容，不需要做特殊化处理
            processData: false,  // tell jQuery not to process the data
            contentType: false  // tell jQuery not to set contentType
        })
    }

    function AjaxSubmit7() {
{#        document.getElementById('img').files[0];//加索引0表示是获取文件的内容#}
{#        创建对象的时候必须加new关键字,jequery是基于xml的一种方式#}
        var data=new FormData();
        //formdata还可以上传文件，字典这不能
        data.append('k1','v1');
        data.append('k2','v2');
        data.append('k3',document.getElementById('img').files[0]);
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4){
                //接收完毕服务器返回的数据，当每次执行完时值都会改变
                console.log(xhr.responseText);
            }
        };
{#        onreadystatechange状态发生更改时会执行，这里要关注全部返回完毕要做的事情。回调函数要在send前配置，不然发时不知道回来找谁#}
         xhr.open('POST','/ajax1.html/');
{#        与谁创建连接，以什么方式#}
         xhr.send(data);
{#        get形式提交就什么都不用放#}
    }
    function AjaxSubmit8() {
        document.getElementById('iframe1').οnlοad=reloadIframe1;
        document.getElementById('fm1').submit();
    }

    function reloadIframe1() {{#  获取iframe内容并打印#}
        console.log(this);
{#        console.log(ths.contentWindow)#}
{#        console.log(ths.contentWindow.document.body.innerHTML)#}
{#        进入iframe的框中，打印其中内容#}
{#        console.log($(ths).contents().find('body').html())#}
{#        juqery方式查找#}
        var content=this.contentWindow.document.body.innerHTML;
        var obj=JSON.parse(content);{# 把字符串转换为对象#}
        console.log(obj);
    }
</script>
</body>
</html>