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

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");
     }

来自谷歌Chrome开发工具。如果它在任何方面都有帮助：

我的servlet被正确调用，但我被重定向到下一页并在该页上得到结果。如何预防

Answer 1

这可能是因为您在表单标记中也提供了“action”和“method”属性。差不多

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

这一点在javascript中的这两行代码中很明显，在这两行代码中，您从表单标记的属性本身获取url

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

这将要做的是，当用户单击submit按钮时，将触发两个调用（一个ajax调用，另一个从表单的action属性调用servlet）

建议的修复：

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

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

         }   
    });

Answer 2

替代方案

您可以将submit按钮移出标记，使其与普通按钮一样

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

Answer 3

你可以试试

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

Answer 4

尝试在ajax成功中添加return false

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

Answer 5

您应该像这样在表单中调用函数，而不是在函数返回false时调用停止表单提交

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