先看一个简单的例子。比如这里有一个简单的表单formr1r2r3r4
c1c2c3c4
loginreset页面如下现在，如果你输入任何内容并提交，表单会触发默认行为，get方式直接提交到当前页面，可以看到这些参数正是我们输入的参数。表单的默认行为通常被我们阻止。毕竟我们不想提交表单后跳转到另一个页面，或者刷新整个页面form.addEventListener("submit",(ev)=>{ev.preventDefault();//自己发送请求})那么，我如何获得这些提交的值呢？表单提交的数据类型是按照数据类型划分的。常用的表单提交数据格式有以下几种formdata格式。需要通过newFormData创建json格式，如{a:1,b:2,c=3}url字符串拼接，形式为a=1&b=2&c=31.formdata通常使用formdata如下varformData=newFormData();formData.append('用户名','xboxyan');formData.append('密码','123456');但是对于表单，就不需要使用这个方法了，可以直接通过下面的方法获取varformData=newFormData(form);//form是一个表单对象，所以不要使用div作为表单容器！为了更方便的使用，这里对表单属性进行简单的扩展/*formdata*/Object.defineProperty(HTMLFormElement.prototype,'formdata',{get(){returnnewFormData(this);}})这样就可以了通过表格。FormData用于获取FormData对象的值是不可见的，需要使用get方法才能看到更多对FormData的操作，请参考https://developer.mozilla.org...2.jsondatajson格式也很常用的数据传输方式是现在，但是nativeform没有直接获取的方式，所以只能自己封装。这里可以在上面的FormData的基础上直接遍历一次。由于有些值会有多个值，比如上面的多选框，这里直接转成数组。具体实现如下/*jsondata*/Object.defineProperty(HTMLFormElement.prototype,'jsondata',{get(){constjsondata={}constformdata=newFormData(this);formdata.forEach((value,key)=>{if(!jsondata[key]){jsondata[key]=formdata.getAll(key).length>1?formdata.getAll(key):formdata.get(key);}});returnjsondata;}})这样就可以通过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(){consturldata=[];Object.entries(this.jsondata).forEach(([key,value])=>{urldata.push(key+'='+(value.join?value.join():value))})returnurldata.join('&');}})这样就可以传递form.urldata总结一下通过以上三种方式，基本可以满足日常开发的大部分需求。前提是html足够规范，form必须是form，radio必须是inputradio等等。很多前端同学或者很多framework都喜欢用div来模拟，这样原生的这些特性就直接舍弃了，不可惜吗？最后附上以上所有源码,key)=>{if(!jsondata[key]){jsondata[key]=formdata.getAll(key).length>1?formdata.getAll(key):formdata.get(key);}});返回jsondata;}})/*formdata*/Object.defineProperty(HTMLFormElement.prototype,'formdata',{get(){returnnewFormData(this);}})/*urldata*/Object.defineProperty(HTMLFormElement.prototype,'urldata',{get(){consturldata=[];Object.entries(this.jsondata).forEach(([key,value])=>{urldata.push(key+'='+(value.join?value.join():value))})returnurldata.join('&');}})
