使用ajax进行表单提交时无法阻止默认表单提交

Question

我正在尝试使用ajax提交表单（也包含fileinput），一切正常但我无法使用return false和e.preventdefault（）方法阻止默认表单提交。

这是我的jquery ajax提交代码：

var formrequest = $('#Request_Search');

formrequest.submit(function (e)     
    {       
         alert("form submit called");
        var fileInput = $('#file'); 
        var file = fileInput.files[0];
        var data = new FormData();
        data = formrequest.serialize();
        data.append('file', file);
       $.ajax({
          type: formrequest.attr('method'),
          url: formrequest.attr('action'),
          data: data,
          contentType: false,
          processData: false,
          success: function (data) 
          {
            alert("Reached")
          },
            error:function()
            {
                 alert("failure");

             }   
        });        
       return false;     //I have tried e.preventDefault() also.But that also does't help   
    });

我的表格代码：

<form id="Request_Search" method="post" action="queryupload" enctype="multipart/form-data" class="col-md-12" style="margin-top: 20px;">

<div class="form-group" id="filediv">

        <label for="file">Upload your Fasta File:</label>
        <input type="file" class="form-control"  name="file" id="file"   required accept=".txs,.fasta,.fa">    
</div>


  <div class="form-group">
   <label for="file">Enter you email id:</label>
    <input type="email" class="form-control" name="emailid" id="emailid" placeholder="Enter emailid so we can send you outputs" required>
</div>

<div class="form-group">
 <label for="file">Enter Percent Identity value :</label>
    <input type="number" min="0" max="100" class="form-control" name="pident" id="pident" placeholder="Enter value for pident" required>
</div>

<div class="form-group">
    <label for="file">Enter Mismatch percentage :</label>
    <input type="number" min="0" max="100"  class="form-control" name="mismatch" id="mismatch" placeholder="Enter values for % mismatch expected" required>
</div>

<div class="form-group">
<label for="file">Enter query coverage :</label>
    <input type="number" min="0" max="100" class="form-control" name="querycoverage" id="mismatch" placeholder="Enter values for query coverage" required>
</div>

<br/>

<div class="form-group"> 
    <input type="submit" value="Submit" i class="btn btn-primary btn-lg btn-block"></input>     
</div>

 </form>

在servlet的dopost（）方法中：

protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException
     {
     PrintWriter po = response.getWriter();
     po.write("Check text");
     }

来自google Chrome devloper工具。如果它可以提供帮助：

我的servlet被正确调用，但是我被重定向到下一页并在该页面上生成。为什么要阻止这个？

Answer 1

你可以尝试

    e.stopPropagation();
    e.preventDefault();

Answer 2

尝试在ajax success

中添加return false

  success: function (data) 
  {
    alert("Reached");
    return false;
  },

Answer 3

可能是因为你在表单标签中给出了“action”和“method”属性。像

这样的东西

<form method="post" action="/servletName"> 
  ... 
  <button type="submit"></button>
</form

从javascript中的这两行可以看出这一点，您可以从表单标记的属性本身获取网址。

  ...
  type: formrequest.attr('method'),
  url: formrequest.attr('action'),
  ...

当用户点击提交按钮时，将触发2次调用（一次ajax调用，另一次调用servlet，来自form的action属性）

建议修复：

• 删除表单标记的“操作”和“方法”属性
• 在ajax代码中对“type”和“url”进行硬编码

  $.ajax({
      type: "post",
      url: "/servletName",
      data: data,
      contentType: false,
      processData: false,
      success: function (data) 
      {
        alert("Reached")
      },
        error:function()
        {
             alert("failure");

         }   
    });

Answer 4

你应该在你的表单中调用你的函数，而不是它的返回false，它的停止表单提交

<form name="myForm" onsubmit="return validateMyForm();"> 

Answer 5

替代

您可以将提交按钮移出标签，使其像普通按钮一样。

然后在按钮的onclick事件中添加表单提交代码。