java - 使用ajax提交表单时无法阻止默认表单提交

Question

我正在尝试使用 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 被正确调用，但我被重定向到下一页并在该页面上显示结果。如何防止这种情况发生？

Answer 1

这可能是因为您在表单标记中也给出了“action”和“method”属性。类似的东西

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

这从 JavaScript 中的这两行中可以明显看出，您在其中从表单标记的属性本身获取 url。

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

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

建议的修复:

• 删除表单标签的“action”和“method”属性
• 在 ajax 代码中对“类型”和“网址”进行硬编码

.

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

         }   
    });