form表单提交，页面不跳转

form表单提交 页面不跳转

在写那种ajax的时候发现请求的formData 数据到服务端总是400，

但是form表单提交的时候页面会跳转，提交图片，视频的的时候

为了防止提交页面不跳转 ，且能获取提交的数据结果，不让他跳转

可以有以下几个方法解决

 

1.下载form.js 文件 

下载地址： https://github.com/jquery-form/form

然后下载完放在页面的根目录下，在页面引入

<script src="/js/jqueryForm.js"></script>

 页面上写法

html:

<div class="postImg">
      <div id="imgSpan">
        点击上传身份证
      </div>
      <form action="<%=iqyAddress%>/OCR/iDCardOCR" enctype="multipart/form-data" id="subform" method="post">
      <input name="Filedata" id="upload_card" type="file" accept="image/*" enctype="multipart/form-data" οnclick="this.form.reset();"/>
      </form>
</div>

js文件

 $('#upload_card').bind('change', function (evt) {
            var fileSize = document.getElementById('upload_card').files[0].size/(1024*1024);
            if(fileSize > 7){
                alert('文件大小不得大于7M');
                return;
            }
           
            var options={
                url: _this.iqyAddress + '/OCR/iDCardOCR',
                type: "post",
                target : '#output',    // 把服务器返回的内容放入id为output的元素中
                beforeSubmit : _this.showRequest(),    // 提交前的回调函数
                success : _this.showResponse(),    // 提交后的回调函数
                // url : url,    //默认是form的action，如果申明，则会覆盖
                // type : type,    // 默认值是form的method("GET" or "POST")，如果声明，则会覆盖
                //dataType : 'json',    // html（默认）、xml、script、json接受服务器端返回的类型
                // clearForm : true,    // 成功提交后，清除所有表单元素的值
                // resetForm : true,    // 成功提交后，重置所有表单元素的值
                timeout : 2000    // 限制请求的时间，当请求大于3秒后，跳出请求
            }

            $('#subform').ajaxSubmit(function (res) {
                console.log(res)
                if(res.code == 200) {
                    _this.cardVal = res.data.IdNum
                    $('#cardText').val(res.data.IdNum);
                    _this.alert('上传成功')
                } else {
                    _this.alert('请上传正确的身份证正面照片')
                }
                return false; // 必须返回false，
            });
        });
        
    showRequest() {
        var _this = this
        _this.alert('正在上传中，请稍等')
    },
    showResponse(data, status) {
    },

 主要写法就是

subform是你表单请求的定义的 ID内容的写法

 // ajaxSubmit 这个方法返回
 $('#subform').ajaxSubmit(function (res) {
   console.log(res)
   // 这里可以获取到接口的返回值
   return false; // 必须返回false，
 });