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>

    效果如下所示:

  • 相关阅读:
    MSSQL Extension For Visual Studio Code
    钉钉开发系列(三)API的调用
    DataTable转换为Model
    钉钉开发系列(十一)钉钉网页扫码登录
    EntityFramework获取数据库的时间
    EntityFramework连接串的调用时传入
    钉钉开发系列(十)SaltUI与WebApi交互
    钉钉开发系列(九)SaltUI在VS中的开发
    钉钉开发系列(八)二维码扫描登录的实现
    钉钉开发系列(七)媒体文件的上传与下载
  • 原文地址:https://www.cnblogs.com/leigood/p/6041339.html
Copyright © 2011-2022 走看看