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>
相关推荐
wcqwcq 2020-07-04
TONIYH 2020-06-11
TONIYH 2020-07-22
83510998 2020-07-18
wcqwcq 2020-06-26
delmarks 2020-06-14
ppsurcao 2020-06-14
tthappyer 2020-06-07
kentrl 2020-11-10
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16