js中form表单属性介绍及阻止默认跳转和获取后端返回数据的方法

js中form表单属性介绍及阻止默认跳转和获取后端返回数据的方法

method

请求方式，一般使用get和post

enctype

application/x-www-form-urlencoded 对所有字符都会进行编码（空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值）

multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值

text/plain 空格转换为 “+” 加号，但不对特殊字符编码

action

请求地址

name

设置表单名称

novalidate

阻止表单默认的验证规则，否则会与开发中的验证规则发生冲突，建议添加

阻止表单默认跳转

ev.preventDefault(),但是同时会阻止表单的默认提交

通过iframe阻止跳转，调用form的submit方法，可以达到提交数据并且不会跳转的目的 <form action="url" target="stop"></form> <iframe name="stop" style="display:none;"></iframe>

form表单提交后，获取后端返回的数据

常见的获取方式是通过jquery的ajaxForm，但是我们往往不会因为一个功能点而去增加项目的重量，这是不合理的，这里我们通过原生来实现这个功能,我们通过iframe阻止跳转是因为我们的form指向了我们的iframe，请求后端后，后端返回数据也就指向了我们的iframe

<form action="url" target="stop"></form> <iframe name="stop" style="display:none;" id="formData"></iframe> javascript document.queryselect('#formData').onload = function() { let data = JSON.parse(this.contentWindow.document.body.innerText }