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

【问题标题】：Can't prevent default form submission while using ajax for form submission使用ajax进行表单提交时无法阻止默认表单提交
【发布时间】：2015-01-23 06:07:26
【问题描述】：

我正在尝试使用 ajax 提交一个表单（其中还包含一个文件输入），一切正常，但我无法使用 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 开发者工具。如果它可以提供帮助：

我的 servlet 被正确调用，但我被重定向到下一页并出现在该页面上。如何防止这种情况发生？

【问题讨论】：

标签： java jquery ajax jakarta-ee

【解决方案1】：

这可能是因为您在表单标签中也提供了“动作”和“方法”属性。类似的东西

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

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

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

这样做的目的是，当用户单击提交按钮时，将触发 2 个调用（一个 ajax 调用和另一个到您的 servlet，来自表单的 action 属性）

建议的修复：

移除表单标签的“action”和“method”属性
在 ajax 代码中硬编码您的“类型”和“网址”

.

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

         }   
    });

【讨论】：

这里有点不对劲。提交事件是可取消的，因此当处理程序仍在运行时，任何东西都不应该击中服务器，否则它就没有机会调用 preventDefault。然而，这正是我在这里看到的行为。处理程序应该通过返回 false 来取消主要提交事件（如果帖子已经到达服务器，它就不能这样做），所以应该进行的唯一调用是 ajax 请求。肯定有什么不对劲。

【解决方案2】：

你可以试试

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

【讨论】：

【解决方案3】：

尝试在ajax成功中添加return false

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

另一种选择

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

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

【讨论】：