chrome下jquery ajax 请求 status 为 canceled 解决

liyifan 2019-05-19

    项目使用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>

相关推荐

mmywcoco / 0评论 2020-06-06