FormData对象

2021/11/20 23:40:35

编程Tag： 对象表单 form var FormData xhr

本文主要是介绍FormData对象，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

formdata对象作用：可以将表单对象作为参数传递到服务器端，还可以传递二进制数据格式文件，

用formdata对象传递表单，需要将表单转换为formdata对象:new FormData(form)，然后可以将这个对象放在send()中进行提交，也正是这样，不能用get方法传递，而使用post方法传递；(因为get方法再url中传递参数)代码如下，写的不好的地方还请大家见谅：

<body>
    <!-- 创建普通html表单 -->
    <form id="form">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="button" id="btn" value="提交">
    </form>
    <script type="text/javascript">
    var form = document.getElementById('form');
        var btn  =document.getElementById('btn');
        btn.onclick = function() {
            // 将普通html表单转换成表单对象
            var formData = new FormData(form);  //formData() 只能放在send()中，所以下面是post方法
            // 创建ajax对象
            var xhr = new XMLHttpRequest();
            // 配置对象
            xhr.open('post','http://localhost:3000/formData');
            // 发送ajax请求
            xhr.send(formData);
            // 监听onload事件
            xhr.onload = function() {
                // 判断http状态码
                if(xhr.status == 200) {
                    console.log(xhr.responseText);
                }
            }
        }
    </script>
</body>

这篇关于FormData对象的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

FormData对象

相关编程文章