chrome下jquery ajax 请求 status 为 canceled 解决

    项目使用bootstrap，为了排版，使用了form，提交是button，如下：

 

 

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="xxxx" class="col-sm-2 col-md-2 col-lg-2 control-label">请输入</label>
    <div class="col-sm-8 col-md-8 col-lg-8">
      <input type="text" class="form-control" name="xxx" id="xxxx" placeholder="请输入">
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2">
      <button class="btn btn-lg btn-success form-control" id="btnGetResult" style="padding: 2px 0px 0px 0px;background-color:#FCAC45;border-color:#FCAC45;">提取</button>
    </div>
  </div>
</form>

 

 

ajax提交时，会发现第一次请求状态status为canceled，同时浏览器自动刷新了一次页面，地址栏url也有变化,参数被追加到url后。

 

经过排除法及查询，得知是如下原因：

 

ajax提交时，form与绑定于button上的click事件会同时触发；button在发送ajax请求时，form 表单内容也会自动提交，以get的方式拼接至当前url上，并重新发送一次请求；最终导致ajax请求状态为canceled;

 

解决：

将 form 节点替换为 div，ajax即可正常，代码如下：

 

<div class="form-horizontal" role="form">
  <div class="form-group">
    <label for="xxxx" class="col-sm-2 col-md-2 col-lg-2 control-label">请输入</label>
     <div class="col-sm-8 col-md-8 col-lg-8">
       <input type="text" class="form-control" name="xxx" id="xxxx" placeholder="请输入">
     </div>
     <div class="col-lg-2 col-md-2 col-sm-2">
       <button class="btn btn-lg btn-success form-control" id="btnGetResult" style="padding: 2px 0px 0px 0px;background-color:#FCAC45;border-color:#FCAC45;">提取</button>
     </div>
   </div>
</div>