美文网首页
JS中form表单属性及阻止默认跳转和获取后端返回数据的方法

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

作者: LongFor_ | 来源:发表于2019-07-18 12:03 被阅读0次
    • 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
    }
    

    相关文章

      网友评论

          本文标题:JS中form表单属性及阻止默认跳转和获取后端返回数据的方法

          本文链接:https://www.haomeiwen.com/subject/jdoklctx.html