zoukankan      html  css  js  c++  java
  • AJAX-----13HTML5中新增的API---FormData

    FormData 表单数据对象,这是在HTML5中新增的一个API,他能以表单对象做参数,自动的将表单的数据打包,当ajax发送数据是,发送FormData内的表单数据给后端即可

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <script>
        function fd(){
            var fdate = document.getElementById('fdate');
            var fd = new FormData(fdate);
            var xhr = new XMLHttpRequest();
            xhr.open('post','10.php',true);
            xhr.send(fd);
            xhr.onreadystatechange = function(){
                if(this.readyState == 4){
                    document.getElementById('desc').innerHTML = this.responseText;
                }
            }
            
        }
    </script>
    <body>
        <form id="fdate" >
            user:<input type="text" name="user"> <br><br>
            age:<input type="text" name="age"> <br><br>
            sex:<input type="text" name="sex"> <br><br>
            QQ:<input type="text" name="QQ"> <br><br>
            <input type="button" value="Go" onclick="fd();"> 
        </form>
        <p id="desc"></p>
    </body>
    </html>

    效果如下所示:

    这样比传统的拼接方法简单多了,当然他还有另外一种用法,如下所示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <script>
        function fd(){
            var fdate = document.getElementById('fdate');
            var fd = new FormData(fdate);
            var fd2 = new FormData();
            var xhr = new XMLHttpRequest();
            xhr.open('post','10.php',true);
            //xhr.send(fd);
            fd2.append('user','leigood');
            fd2.append('age','18');
            xhr.send(fd2);
            xhr.onreadystatechange = function(){
                if(this.readyState == 4){
                    document.getElementById('desc').innerHTML = this.responseText;
                }
            }
            
        }
    </script>
    <body>
        <form id="fdate" >
            user:<input type="text" name="user"> <br><br>
            age:<input type="text" name="age"> <br><br>
            sex:<input type="text" name="sex"> <br><br>
            QQ:<input type="text" name="QQ"> <br><br>
            <input type="button" value="Go" onclick="fd();"> 
        </form>
        <p id="desc"></p>
    </body>
    </html>

    效果如下所示:

  • 相关阅读:
    线程池的实现原理
    log4j 具体解说(不能再具体了)
    MyEclipse中背景颜色的设定
    cacheManager载入问题
    SAP 经常使用T-CODE
    Oracle 版本号说明
    用XMPP实现完整Android聊天项目
    选择如何的系统更能适合App软件开发人员?
    爱国者布局智能硬件,空探系列PM2.5检測仪“嗅霾狗”大曝光
    Innodb引擎状态查看
  • 原文地址:https://www.cnblogs.com/leigood/p/6041339.html
Copyright © 2011-2022 走看看