AJAX-----13HTML5中新增的API---FormData

Posted 2020-08-17 夺命雷公狗

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

效果如下所示：

以上是关于AJAX-----13HTML5中新增的API---FormData的主要内容，如果未能解决你的问题，请参考以下文章

10分钟教你快速上手Vue3中新增的API

java_JDK8中新增的时间API

Java 16 中新增的 Stream 接口的一些思考

ES6中新增的promise对象