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
}