`

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>

 

分享到:
评论

相关推荐

    jquery.uploadify插件在chrome浏览器频繁崩溃解决方法

    jquery.uploadify插件在chrome浏览器频繁崩溃问题,一直困扰了好久,网上很多人说是由于chrome缓存的原因,插件初始化时,需要引用js,而chrome的缓存导致没有没有请求到jquery.uploadify-3.1_min.js,所以引起崩溃...

    jquery.jBox-2.3.min.js

    解决 top.$.jBox frame 弹窗请求重复,一次为canceled的问题 博客里有解决方案https://blog.csdn.net/zhaofuqiangmycomm/article/details/107035787

    jquery.fonticonpicker

    **jQuery.FontIconPicker** 是一个基于 jQuery 的插件,专门用于在网页中实现下拉图标选择功能。这个插件提供了一个优雅且用户友好的界面,允许用户从一系列图标集中挑选合适的图标,通常用于网站设计、应用程序开发...

    【JavaScript源代码】vue axios拦截器常用之重复请求取消.docx

    为了解决这些问题,我们可以利用 Axios 的拦截器功能来实现请求的管理和取消。 Vue Axios 拦截器的常用功能之一就是取消重复请求。拦截器允许我们在请求发送前和响应返回后执行额外的操作。在本例中,我们将探讨...

    nt status summary

    0 0xc000000c 0x001f0003 NT_STATUS_TIMER_NOT_CANCELED 0 0xc000000d 0x00570001 NT_STATUS_INVALID_PARAMETER 0 0xc000000e 0x00020001 NT_STATUS_NO_SUCH_DEVICE 1 0xc000000f 0x00020001 NT_STATUS_NO_SUCH_FILE...

    Android-Android-RxLocationSettings用RxJava请求位置之前确认设置

    // 用户已解决了设置问题,可以继续请求位置 break; case Activity.RESULT_CANCELED: // 用户取消了解决设置问题,可能需要提示用户 break; } } } ``` 通过以上步骤,我们可以优雅地在请求位置之前检查和...

    解决vue请求接口第一次成功,第二次失败问题

    总的来说,解决Vue请求接口第一次成功、第二次失败的问题需要从多个角度排查,包括但不限于数据的正确管理、请求的类型和跨域策略。通过仔细分析请求和响应的细节,通常可以找到问题的根源并采取相应的解决措施。

    请求码和结果码demo

    当你启动一个Activity或者IntentService时,可以为Intent指定一个请求码。当这个被启动的组件完成任务并返回时,它会将这个请求码作为参数返回给调用者,这样调用者就能知道哪个操作已经完成。例如,在启动相机拍照...

    activity之间通信-请求码结果码的使用

    总之,请求码和结果码是Android Activity间通信的重要工具,它们使得数据和控制流能够在多个Activity之间顺畅地传递,为复杂应用提供了灵活的架构支持。熟练掌握这一机制,能够帮助开发者更好地设计和实现Android...

    Extjs 调用Java Json的例子

    在`Ext.Ajax.request`的回调函数中,检查`response.status`,并根据需要显示错误消息或执行其他操作。 以上就是ExtJS调用Java JSON服务的基本过程。实际开发中,你可能需要考虑更多细节,如认证、分页、过滤和排序...

    symtec netbackup status code

    ### Symantec NetBackup Status Code详解 #### 一、引言 在IT行业中,备份解决方案是确保数据安全的重要环节之一。Symantec NetBackup作为一款领先的企业级备份软件,在市场上享有很高的声誉。为了帮助用户更好地...

    git在idea中的冲突解决方法(非常重要)

    在冲突解决过程中,还应当了解一些基本的Git命令,如`git status`可以查看哪些文件存在冲突,`git log`可以查看提交历史,以帮助开发者理解冲突发生的原因和上下文。 在处理冲突时,开发者应保持谨慎和耐心,因为...

    最新版axios入门教程——16.16-模拟实现axios发送请求(Av756328321,P16).rar

    ** Axios入门教程详解** 在现代Web开发中,前端与...通过学习这个教程,你将能够熟练地使用axios进行各种网络操作,为你的Web应用提供更加流畅的用户体验。记得实践是检验真理的唯一标准,动手尝试并应用这些知识吧!

    简单的HTTP请求工具AndroidHttpTools.zip

    AndroidHttpTools 是简单的 HTTP 请求工具,支持 get,post,post 文件。 //------------------------简单示例------------------------//String url = "http://www.baidu.com/"; private void requestData()...

    SpringBoot页面跳转访问css、js等静态资源引用无效解决.docx

    5. **控制器配置**:在SpringBoot的控制器类中,我们需要配置处理请求的方法。例如,一个简单的重定向到首页的配置可能如下: ```java @GetMapping("/") public String home() { return "index"; } ``` 这里...

    最新版axios入门教程——15.15-axios发送请求过程详解(Av756328321,P15).rar

    这篇最新的 Axios 入门教程深入讲解了 Axios 发送请求的过程,旨在帮助初学者快速掌握这一强大的工具。 首先,我们了解 Axios 的基本用法。在 JavaScript 中,你可以通过 `import` 或 `require` 来引入 Axios。例如...

    SignalR跨域

    它支持服务器推送,允许服务器向客户端发送数据而无需客户端请求,从而实现双向通信。跨域问题在 Web 开发中是一个常见挑战,特别是当涉及到 SignalR 的实时通信时。下面将详细解释 SignalR 跨域的概念、原因、解决...

    axios如何取消重复无用的请求详解

    为了提高页面的响应性能和避免不必要的后端操作,取消这些请求变得尤为重要。本文将详细介绍如何使用axios取消重复无用的请求。 首先,我们来看看axios如何实现取消操作的两种方法: 1. 使用axios.CancelToken....

    详解Axios 如何取消已发送的请求

    总之,Axios 的取消请求功能通过 `CancelToken` 实现,提供了两种创建方式,可以方便地在实际项目中集成,解决并发请求时可能导致的数据不一致问题。通过封装API和在组件中正确管理 `source`,可以确保请求的正确性...

Global site tag (gtag.js) - Google Analytics