--- # 主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate # 贡献主题：https://github.com/xitu/juejin-markdown-themes theme: fancy highlight: --- ## 先看一个简单的例子比如这里有一个简单的 `form` 表单 ```html ``` 页面如下 ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a407d177d7114e5393492fc52a5cafdd~tplv-k3u1fbpfcp-watermark.image) 现在，随便输入点内容 ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/804182a389e14d8881078bf322fb4945~tplv-k3u1fbpfcp-watermark.image) 如果提交，表单会触发默认行为，直接以`get`方式提交到当前页 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c9d66690158f4f60a63969d42f818703~tplv-k3u1fbpfcp-watermark.image) 可以看到这些参数正是我们输入的参数。 ## 表单的默认行为通常我们都会把这些默认行为阻止掉，毕竟都不希望在提交表单会跳转到另一个页面，或者刷新整个页面 ```js form.addEventListener("submit", (ev) => { ev.preventDefault(); // 自己发请求 }) ``` 那么，我需要如何拿到这些提交的值呢？ ## 表单提交的数据类型根据数据类型来划分，通常使用的表单提交数据格式大概有以下几种 1. formdata格式，需要通过 new FormData 创建 1. json格式，形如`{ a:1,b:2,c=3 }` 1. url字符串拼接，形如 `a=1&b=2&c=3` ### 1.formdata 通常 **formdata** 的使用方式如下 ```js var formData = new FormData(); formData.append('username', 'xboxyan'); formData.append('password', '123456'); ``` 但是对于 **form** 来说，大可以不必采用这样的方式，直接通过以下方式获取 ```js var formData = new FormData(form); // form为表单对象 ``` 所以，**针对表单容器就不要再用 `div` 了！** 为了更加方便的使用，这里简单扩展一下 **form** 属性 ```js /* formdata */ Object.defineProperty(HTMLFormElement.prototype, 'formdata', { get() { return new FormData(this); } }) ``` 这样就可以通过`form.formdata`来获取了 ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bb316fe974d346dda6b9f686a4d49408~tplv-k3u1fbpfcp-watermark.image) > FormData对象的值是不可见的，需要通过get方式才能看到 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4276c3f8bd1b418793e5161766e85575~tplv-k3u1fbpfcp-watermark.image) 关于 **FormData** 的更多操作可参考 https://developer.mozilla.org/en-US/docs/Web/API/FormData ### 2.jsondata json 格式也是非常常用的一种数据传递方式了，不过原生 **form** 并没有直接获取的方式，只能自己封装了。这里可以直接在上面 **FormData** 的基础上遍历一次即可，由于有些值会有多个，比如上面的多选框，这里直接转成了数组，具体实现如下 ```js /* 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`来获取了 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e3d2f28d63bb4d1cbf554815836a80d9~tplv-k3u1fbpfcp-watermark.image) ### 3.urldata 还有一种方式在`get`请求中会用到，就是 url拼接方式，这个原生也没有直接的方案，可以借助上面`jsondata`转换一下，这里做了一个小改动，比如默认的多选是`b=1&b=2&b=3&c=1`，这里改造成了`b=1,2,3&c=1`（可以根据实际需求来改动，这里是用 **,** 分隔的），具体实现如下 ```js /* 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`来获取了 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b4862c38288542d0add648583f92a6e3~tplv-k3u1fbpfcp-watermark.image) ## 总结通过以上3个方法，基本可以满足日常开发的绝大部分需求，前提是 **HTML结构** 足够规范，表单就必须是 `form`，单选就必须是 `input radio`等等，很多前端同学或者说很多框架都喜欢用 `div` 来模拟，以至于有些非常实用的原生特性就直接被抛弃掉了，岂不可惜？最后，附上以上全部源码，记住 3 个属性方法即可 ```js /* 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('&'); } }) ```