html怎么获取form表单数据,如何优雅的获取Form表单数据?
先看一个简单的例子
比如这里有一个简单的 form 表单
r1
r2
r3
r4
c1
c2
c3
c4
login
reset
页面如下
现在,随便输入点内容
如果提交,表单会触发默认行为,直接以get方式提交到当前页
可以看到这些参数正是我们输入的参数。
表单的默认行为
通常我们都会把这些默认行为阻止掉,毕竟都不希望在提交表单会跳转到另一个页面,或者刷新整个页面form.addEventListener("submit", (ev) => {
ev.preventDefault();
// 自己发请求
})
那么,我需要如何拿到这些提交的值呢?
表单提交的数据类型
根据数据类型来划分,通常使用的表单提交数据格式大概有以下几种formdata格式,需要通过 new FormData 创建
json格式,形如{ a:1,b:2,c=3 }
url字符串拼接,形如 a=1&b=2&c=3
1.formdata
通常 formdata 的使用方式如下var formData = new FormData();
formData.append('username', 'xboxyan');
formData.append('password', '123456');
但是对于 form 来说,大可以不必采用这样的方式,直接通过以下方式获取var formData = new FormData(form); // form为表单对象
所以,针对表单容器就不要再用 div 了!
为了更加方便的使用,这里简单扩展一下 form 属性/* formdata */
Object.defineProperty(HTMLFormElement.prototype, 'formdata', {
get() {
return new FormData(this);
}
})
这样就可以通过form.formdata来获取了
FormData对象的值是不可见的,需要通过get方式才能看到
关于 FormData 的更多操作可参考 https://developer.mozilla.org...
2.jsondata
json 格式也是非常常用的一种数据传递方式了,不过原生 form 并没有直接获取的方式,只能自己封装了。
这里可以直接在上面 FormData 的基础上遍历一次即可,由于有些值会有多个,比如上面的多选框,这里直接转成了数组,具体实现如下/* jsondata */
Object.defineProperty(HTMLFormElement.prototype, 'jsondata', {
get() {
const jsondata = {}
const formdata = new FormData(this);
formdata.forEach((value, key) => {
if (!jsondata[key]) {
jsondata[key] = formdata.getAll(key).length > 1 ? formdata.getAll(key) : formdata.get(key);
}
});
return jsondata;
}
})
这样就可以通过form.jsondata来获取了
3.urldata
还有一种方式在get请求中会用到,就是 url拼接方式,这个原生也没有直接的方案,可以借助上面jsondata转换一下,这里做了一个小改动,比如默认的多选是b=1&b=2&b=3&c=1,这里改造成了b=1,2,3&c=1,具体实现如下/* urldata */
Object.defineProperty(HTMLFormElement.prototype, 'urldata', {
get() {
const urldata = [];
Object.entries(this.jsondata).forEach(([key, value]) => {
urldata.push(key + '=' + (value.join ? value.join() : value))
})
return urldata.join('&');
}
})
这样就可以通过form.urldata来获取了
总结
通过以上3个方法,基本可以满足日常开发的绝大部分需求,前提是 html 足够规范,表单就必须是 form,单选就必须是 input radio等等,很多前端同学或者说很多框架都喜欢用 div 来模拟,以至于这些原生特性就直接被抛弃掉了,岂不可惜?
最后,附上以上全部源码/* jsondata */
Object.defineProperty(HTMLFormElement.prototype, 'jsondata', {
get() {
const jsondata = {}
const formdata = new FormData(this);
formdata.forEach((value, key) => {
if (!jsondata[key]) {
jsondata[key] = formdata.getAll(key).length > 1 ? formdata.getAll(key) : formdata.get(key);
}
});
return jsondata;
}
})
/* formdata */
Object.defineProperty(HTMLFormElement.prototype, 'formdata', {
get() {
return new FormData(this);
}
})
/* urldata */
Object.defineProperty(HTMLFormElement.prototype, 'urldata', {
get() {
const urldata = [];
Object.entries(this.jsondata).forEach(([key, value]) => {
urldata.push(key + '=' + (value.join ? value.join() : value))
})
return urldata.join('&');
}
})
关于找一找教程网
本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[如何优雅的获取Form表单数据?]http://www.zyiz.net/tech/detail-150683.html
html怎么获取form表单数据,如何优雅的获取Form表单数据?相关推荐
- angular js创建表单_如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...
- .jsp页面提交form表单,后台却无法获取input文本框value值
问题一:奇葩bug总结:input提交,后端获取不到value问题 注意: java后端jsp页面input disabled="disabled"表单提交,后端无法print获取 ...
- ajax提交form表单到php,ajax如何提交form表单数据?ajax提交form表单数据的方法介绍...
对于form表单数据的提交,我们一般都会想到使用ajax提交,那么,ajax如何来提交form表单数据呢?接下来的这篇文章就来给大家来介绍关于ajax提交form表单数据方法,有需要的伙伴可以参考一下 ...
- php获取表单信息的代码_PHP获取HTML文件名表单数据等
1.PHP获取表单各项数据 --- 与表单提交的方式有关 GET方式,格式:$_GET["formelement"] POST方式,格式:$_POST["formelem ...
- HTML form表单添加enctype属性后获取不到input值
HTML form表单添加enctype属性后获取不到input值 问题如图所示, 在servlet中输出获取的属性值,发现全部为null 最后结论 enctype修改了form表单提交时的格式,不再 ...
- Form表单提交成功,但是后台并没有处理数据且debug无效
今天碰到一个情况,有一个form表单(用ww标签),表单内容是一个实体类的注册信息,点击提交后,发现没有效果,但是前端debugger后,居然ajxa跳转进入success中,居然是成功,但是返回的数 ...
- form表单通过request取不到值multipart/form-data 文件上传表单中传 递参数无法获取的原因!
1.什么是multipart/form-data 首先我们需要明白在html中的enctype属性, enctype:规定了form表单在发送到服务器时候编码方式.他有如下的三个值. ①appli ...
- form表单以ajax方法提交,附加额外的数据
在项目中有个添加账户的模块,如下图.填写的信息以表单是形式ajax的方法提交,但是又需要添加额外信息给后台(比如:创建人),首先要引入JQuery.js库,和jquery.form.js var op ...
- 表单及数据提交、表单的作用、服务端接收提交的数据、php处理数据流程、文件域及文件域中数据处理、php展示数据(响应)
表单及数据提交: 表单的作用: 用于收集相关信息:html中有专门提交数据的标签,可以很容易的收集用户输入的信息,这个标签有两个重要的属性:action表单提交的地址和method以什么方式提交表单, ...
最新文章
- ERPLAB中文教程:高级EvenList选项
- mysql中自增auto_increment功能的相关设置及问题
- C/C++人机猜拳游戏
- 14岁少年打赏主播6万多元 后称自己行为无效起诉火山小视频要求返还
- mysql基础操作(二)
- python 空格字符的表示_python字符串怎么去空格
- 洛谷P1217回文质数(特判筛选,取巧判断顺序)
- jQuery新的事件绑定机制on()
- iOS媒体视频播放器应用源码
- PADS2007快捷键、无模命令大全
- Adobe Acrobat Pro制作pdf模板
- npoi xlsx转换html,NPOI导Excel样式设置(转)
- file-saver实现文件流下载
- 2018年北京信息科技大学第十届程序设计竞赛暨ACM选拔赛 C 颜料的混合 (计算几何)
- 小程序高级电商前端第1周走进Web全栈工程师<二>
- Chrome——截图插件篇
- 安卓手机Recovery概述和原理分析
- sed 删除某一行_sed删除指定行
- CentOS7 配置R语言及Rstudio-serve
- 闲谈杂记:理想中智能家居App是否都可以做成分享模式
热门文章
- Holographic MIMO Surfaces for 6G Wireless Networks: Opportunities, Challenges, and Trends阅读
- 回望过去三年(作为程序猿踏入社会的三年) 续篇
- 【English】十月英语总结
- UE4_UE5结合罗技手柄(F710)使用记录
- 焦耳小偷工作原理分析
- C语言编译、链接和运行详解
- vue /v-show和v-if
- PNAS:人类头皮记录电位的时间尺度
- matlab流程图程序,matlab程序流程图
- 【stm32】利用单片机实现小车直线和圆弧的识别