chrome下jquery ajax 请求 status 为 canceled 解决

阅读更多

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

 

 

  

    请输入
    

      
    
    

      提取
    
  

 

 

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

 

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

 

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

 

解决：

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

 

  

    请输入
     

       
     
     

       提取