FormData()收集表单信息

最新推荐文章于 2024-07-16 10:52:35 发布
最新推荐文章于 2024-07-16 10:52:35 发布
阅读量594 收藏
点赞数
分类专栏： Ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/phc814862399/article/details/81984867
版权

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单数据对象</title>
</head>
<body>
<div>
    <form>
        <table>
            <tr>
                <td>姓名：</td>
                <td><input type="text" name="uname"/></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td><input type="radio" name="sex" value="1"/>女<input type="radio" name="sex" value="0"/>男</td>
            </tr>
            <tr>
                <td>电话：</td>
                <td><input type="tel" name="tel"/></td>
            </tr>
            <tr>
                <td>邮件：</td>
                <td><input type="email" name="email"/></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" name="pwd"/></td>
            </tr>
            <tr>
                <td>
                    <input type="button" id="sub" value="上传">
                </td>
            </tr>
        </table>
    </form>
</div>
<script>
    var form = document.getElementsByTagName("form")[0];

    var sub=document.getElementById("sub");
    sub.onclick=function () {
        //使用FormData收集表单信息
        var fd = new FormData(form);
        //查看表单信息
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
            }
        }
        xhr.open("post", "./TestFormData.php");
        xhr.send(fd);
    }
</script>
</body>
</html>

PHP：

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2018/8/23
 * Time: 15:03
 */
print_r($_POST);

 

好长同学
关注
专栏目录
记录手动处理form表单中对table表格中的行数据的收集
Seeker-Wu的专栏
11-30 4774
通过ajax发送数据到controller来处理，这是大部分web应用都会遇到的问题。而对于form表单数据的收集，如果要发送数据少的话，我们可以一个一个来收集，而如果有很多也就是说批量操作那么我们可以通过 $("#FormId").serializeArray()；来自动发送数据，而对于要收集的对象属性名都是相同的，而在controller层的注解通过普通的 @RequestMapping(
PHP Ajax,FormData收集表单数据(包括文件) 页面无刷新上传文件(提交表单)
houyanhua1的专栏
01-29 5872
一、FormData收集表单数据(包括文件) dom可以获取普通表单域信息，并可以直接提交给服务器 javascript实现附件信息抓取，之前浏览器技术由于有安全方面的限制，也不允许通过js抓取附件信息。 FormData可以实现普通表单域 和 上传文件域 信息的收集。 收集附件信息： dom方式只可以收集普通的表单域信息，并且浏览器由于安全方面的限制也禁止通过javascript语言操
查看 FormData 中已存在的值
weixin_33979745的博客
04-26 5659
var formData = new FormData(); formData.append('name','bob'); formData.append('sex','male'); formData.append('age','12'); console.log(formData.get('sex')); // obj.get('') ...
js普通对象转换成formData对象，并查看转换后的formData内容
最新发布
qq_59572992的博客
07-16 662
因为接口的原因，需要提交 multipart/form-data 格式的数据，需要将js的普通对象转换成formData对象用于提交。
利用FormData收集表单数据实现ajax传递post数据
weixin_30894389的博客
07-17 236
向服务器ajax传入数据可以：1.利用dom获取表单值传入（f1） 2.利用FormData发送传递ajax数据（f2）（没有form表单，这使用append()方法添加数据参考f3） <form id="reg"> 　　用户名:<input type="text" id="username" name="username" /><br /> 　　...
Alamofire源码解读系列(十一)之多表单(MultipartFormData)
weixin_34018169的博客
03-31 252
本篇讲解跟上传数据相关的多表单 前言 我相信应该有不少的开发者不明白多表单是怎么一回事，然而事实上，多表单确实很简单。试想一下，如果有多个不同类型的文件(png/txt/mp3/pdf等等)需要上传给服务器，你打算怎么办？如果你一个一个的上传，那我无话可说，但是如果你想一次性上传，那么就要考虑服务端如何识别这些不同类型的数据呢？ 服务端对不同类型数据的识别解决方案就是多表单。客户端与服务端共同...
查看formData里面的数据内容
阿牛哥的博客
06-28 1518
【代码】查看formData里面的数据内容。
Ajax+FormData+javascript实现无刷新表单信息提交
01-19
dom收集表单信息，利用FormData快速收集表单信息 ，实例化表单数据对象 同时收集fm的表单域信息。 var fd = new FormData(fm); //实例化对象 alert(fd); fd对象内部有收集的form表单域信息 ajax传递表单...
Vue formData实现图片上传
10-16
FormData对象是一个用于以键值对形式构建一组键值对的接口，经常用于收集表单数据。它特别适用于文件上传场景，因为它可以自动处理多部分编码。在本文中，通过实例化FormData对象，并使用append方法添加文件数据和...
通过Ajax方式上传文件使用FormData进行Ajax请求
10-21
FormData是一个能够将数据以键值对形式存储的接口，主要功能是方便收集表单数据，并且通过异步请求的方式发送给服务器。这一点对于需要上传文件到服务器的应用场景非常有用。传统的form表单提交方式在提交文件时会...
HTML5 FormData 方法介绍以及实现文件上传示例
09-28
通过 JavaScript 创建一个 FormData 对象，并将需要上传的表单元素作为参数传递给 FormData 的构造函数，这样就可以将表单内的数据组织成适合传输的格式。对于文件上传，需要在表单中包含一个类型为 file 的 input ...
信息收集个人网页模板
01-14
信息收集个人网页模板
查看FormData里的值
周凤伟的博客
10-20 5908
查看FormData里的值 const formData = new FormData(); formData.append("basePath", "fos/attach/"); formData.append("file", e.file); 1)遍历 for (var [a, b] of formData.entries()) { console.log(a, b, '--------------'); } 2)get formdata.get(key)
FormData使用详解
ALEX_wxy的博客
01-15 754
$scope.uploadImages = function () { //new FormData(document.getElementById("formImage")) let form = document.getElementById("formImage"); let formData = new FormData(form); ...
FormData对象
weixin_47505105的博客
03-10 714
本文章讲解了关于FormData对象以及使用和实例方法
FormData 对象
m0_54007573的博客
06-17 351
FormData对象
微信小程序表单信息循环
06-06
您好，感谢您的提问。如果您想要在微信小程序中实现表单信息循环，可以使用小程序的组件和数据绑定功能。 具体来说，您可以使用小程序的`<form>`组件来创建表单，并使用`<input>`、`<textarea>`等组件来收集用户输入的信息。然后，您可以使用小程序的数据绑定功能，将用户输入的信息绑定到一个数组中。例如，您可以创建一个空数组`formData`，然后将每次用户输入的信息添加到该数组中。 接着，您可以使用小程序的列表渲染功能，将`formData`数组中的信息渲染到页面上。具体来说，您可以使用`<view>`等组件来显示`formData`数组中的每一项信息。 下面是一个简单的示例代码，供您参考： ``` <form bindsubmit="onSubmit"> <input name="name" placeholder="请输入姓名" /> <textarea name="intro" placeholder="请输入个人简介"></textarea> <button type="submit">提交</button> </form> <view wx:for="{{formData}}"> <view>姓名：{{item.name}}</view> <view>个人简介：{{item.intro}}</view> </view> Page({ data: { formData: [] }, onSubmit(e) { const { name, intro } = e.detail.value const formData = this.data.formData.concat([{ name, intro }]) this.setData({ formData }) } }) ``` 在上面的代码中，我们创建了一个表单，收集用户的姓名和个人简介，然后将每次用户输入的信息添加到`formData`数组中。最后，我们使用`wx:for`将`formData`数组中的信息渲染到页面上。 希望对您有所帮助。如果您有任何问题，请随时问我。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值