首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何防止jquery ajax调用触发两次,我使用的是jquery 2.1.4

要防止jQuery Ajax调用触发两次,可以采取以下几种方法:

  1. 使用防止重复点击的标志位:在Ajax请求开始前,设置一个标志位,表示当前是否正在进行Ajax请求。在请求完成后,将标志位重置。在下一次请求开始前,先判断标志位是否为真,如果为真则说明上一次请求还未完成,不再发起新的请求。
代码语言:javascript
复制
var isAjaxInProgress = false;

function ajaxCall() {
  if (isAjaxInProgress) {
    return;
  }
  
  isAjaxInProgress = true;
  
  $.ajax({
    url: "your-url",
    method: "GET",
    success: function(response) {
      // 处理成功响应
    },
    error: function() {
      // 处理错误响应
    },
    complete: function() {
      isAjaxInProgress = false;
    }
  });
}
  1. 使用jQuery的one()方法:one()方法可以绑定一个只执行一次的事件处理函数。在每次Ajax请求前,先解绑之前绑定的事件处理函数,然后再绑定新的事件处理函数。
代码语言:javascript
复制
function ajaxCall() {
  $.ajax({
    url: "your-url",
    method: "GET",
    success: function(response) {
      // 处理成功响应
    },
    error: function() {
      // 处理错误响应
    },
    complete: function() {
      // 解绑之前绑定的事件处理函数
      $(document).off("click", "#your-button", ajaxCall);
      
      // 绑定新的事件处理函数
      $(document).one("click", "#your-button", ajaxCall);
    }
  });
}
  1. 使用jQuery的unbind()方法:在每次Ajax请求前,先解绑之前绑定的事件处理函数,然后再绑定新的事件处理函数。
代码语言:javascript
复制
function ajaxCall() {
  $.ajax({
    url: "your-url",
    method: "GET",
    success: function(response) {
      // 处理成功响应
    },
    error: function() {
      // 处理错误响应
    },
    complete: function() {
      // 解绑之前绑定的事件处理函数
      $("#your-button").unbind("click", ajaxCall);
      
      // 绑定新的事件处理函数
      $("#your-button").bind("click", ajaxCall);
    }
  });
}

以上是防止jQuery Ajax调用触发两次的几种常见方法,根据具体情况选择适合的方法进行实现。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用JQueryAjax调用WebService服务 基于Spring + CXF框架Web Service

基于Spring + CXF框架Web Service 1、在之前基础上修改,如果想使用JQueryAjax调用WebService服务,必须需要先获取到请求参数值,参数值下面的这部分...,如何获取到这参数值呢,只需要在客户端配置出拦截器即可,后台打印参数,然后配置到自己需要地方即可。...配置,这里还是使用账号密码验证服务,新增了出拦截器配置,其他还是使用上篇类和配置。...配置,这里还是使用账号密码验证服务,新增了入拦截器配置,其他还是使用上篇类和配置。...,分别是AJax请求webservice、Jquery请求webservice、HttpURLConnection请求webservice,所以搞一个HttpURLConnectionservlet来接收请求

2K20
  • jquery学习

    它是轻量级js库(压缩后只有21k) ,这是其它js库所不及,它兼容CSS3,还兼容各种浏览器 jQuery一个快速,简洁javaScript库,使用户能更方便地处理HTMLdocuments...jQuery还有一个比较大优势,它文档说明很全,而且各种应用也说得很详细,同时还有许多成熟插件可供选择。 二 什么jQuery对象?...如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery方法: $(“#test”).html(); $("#test").html() //意思指:获取ID为...//虽然jQuery对象是包装DOM对象后产生,但是jQuery无法使用DOM对象任何方法,同理DOM对象也不能使用jQuery方法.乱使用会报错 //约定:如果获取 jQuery...": JSONP 格式 使用 JSONP 形式调用函数时,如 "myurl?

    2.2K40

    jQuery学习笔记

    ; }) }); $jQuery使用变量名,可以使用 jQuery.noConflict()避免冲突,它返回值就是jQuery对象。...事件触发 事件触发有两种方式,一使用预定“事件函数”( .click(), .focus()),二使用 trigger()或 triggerHandler()。...$.ajax() 基本使用形式: jQuey.ajax(settings) settings一个对象,里面包含了所有的配置项。 url 请求地址。...Deferred Deferred对象是在jQuery1.5中引入回调管理对象。其作用是把一堆函数按顺序放入一个调用链,然后根据状态来依次调用这些函数。AJAX所有操作都是使用它来进行封装。....}); 它跟两次 defer.done 不同。 new_defer 会在 inner 那里 defer 被触发时再被触发,所以输出结果: inner, hello。

    3.5K20

    JavaScript实现模糊推荐input框(类似搜索框)

    如何用JS实现一个类似搜索框输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到jquery-uiautocomplete,jquery...keyup事件,以及ajax与服务端交互。...plugins/jQuery/jQuery-2.1.4.min.js"> <script src="/static/plugins/jQueryUI/<em>jquery</em>-ui.min.js"...与后端交互 简单来说: 1、文本输入框每次键入,触发一个keyup事件; 2、事件处理方式向后端请求模糊推荐项items,这里返回数据结果: { "errno": 0; "data"..."pathN"] } 3、autocomplete自动填充hidden输入框,其余事情jquery-ui会为你处理好; 4、当你点选完成,或者输入完成后,path框失去焦点(blur事件

    4.5K90

    jQuerydeferred对象详解

    今天想介绍,就是从jQuery 1.5.0版本开始引入一个新功能----deferred对象。 这个功能很重要,未来将成为jQuery核心方法,它彻底改变了如何jQuery使用ajax。...为了实现它,jQuery全部ajax代码都被改写了。但是,它比较抽象,初学者很难掌握,网上教程也不多。所以,把自己学习笔记整理出来了,希望对大家有用。...本文不是初级教程,针对读者那些已经具备jQuery使用经验开发者。如果你想了解jQuery基本用法,请阅读编写jQuery设计思想》和《jQuery最佳实践》。...$.ajax()操作完成后,如果使用低于1.5.0版本jQuery,返回XHR对象,你没法进行链式操作;如果高于1.5.0版本,返回deferred对象,可以进行链式操作。...; }); (运行代码示例10) 八、普通操作回调函数接口(中) 另一种防止执行状态被外部改变方法,使用deferred对象建构函数$.Deferred()。

    1.3K60

    jQuery架构设计与实现(2.1.4版本)

    市面上jQuery书太多了,良莠不齐,看了那么多总觉得少点什么 对"干货",不喜欢就事论事写代码 想把自己所学知识点,代码技巧,设计思想,代码模式能很好表达出来 所以考虑通过分析...jQuery源码库方式来表达,尽力做最好 内容结构还在不断修正,欢迎给出建议… 本书围绕几个核心点: 设计理念 结构组织 抽象设计 模式运用 场景套用 第一章:理解架构 1.1 我们真正会使用...2.1.2 作为函数调用 2.1.3 作为apply 或 call 调用 2.1.4 作为构造函数 2.2 原型优与弊 2.3 架构设计 2.3.1 new操作符...4.5.2 HTML5data-*属性 4.5.3 缓存检测 4.6 jQuery.data与data区别 4.7 jQuery.data实现 4.8 .data实现 4.9 缓存清理...get 14.2 http协议 14.3 数据处理 14.4 实现一个完整Ajax 14.5 jQuery.ajax做了那些事?

    1.1K51

    大白话讲解Promise(三)搞懂jqueryPromise 一文 学习+新领悟

    return def;            //建议返回 def.promise();    其实他就是一个返回受限Deferred对象方法,防止外部乱用 2、JqueryDeferred...同义词 $.ajax().success() $.ajax().error() 猛地一看,可能不太懂,测试代码贴上就明白了 def = $.Deferred() def.done(function...经测,def.notify()  不会触发alwaysFun.    ajax同义词为:$.ajax().complete( ) 6、$.when用法 和Es6不同,接受不是一个数据。...deferred.promise( jqXHR )这句也能看出,ajax返回受限Deferred对象。 jquery加了这么些个语法糖,虽然上手门槛更低了,但是却造成了一定程度混淆。...ajax返回一个Deferred对象,success、error、completeajax提供语法糖,功能与Deferred对象done、fail、always一致。就酱。

    48220

    js如何操作本地程序

    背景 假设有这样一个产品,一个web和一个winform客户端,在客户在web网页上面点击启动客户端来处理,这个时候开始调用本地客户端,来完成指定工作。...这种场景在日常上网中也比较常见,如使用迅雷下载。当然实现方式也有很多种,今天来演示一种用监控Http请求来实现这个功能,思路如下: ?...HttpListener 对于上面的分析,最重要功能虽实现对Http监控,而.net中已经封装了我们需求,下面看下如何具体实现: static void Main(string[] args...Process.Start(reciveInfo.path); ctx.Response.Headers.Add("Access-Control-Allow-Origin","*"); //防止出现跨域问题错误.../jquery/2.1.4/jquery.min.js"> $(function() { $("#btnQQ

    2.3K20

    jQuery 升级踩坑大全

    但是如果在你调用on函数时候,前面的$(selector)在当前网页上根本不匹配任何元素(该元素可能后面的代码才加到DOM里),那是不会绑定成功。...JQMIGRATE: jQuery.fn.attr( props, pass ) is deprecated 实践中发现,早期写代码里面,获取一个input输入表单值时,怎么获取呢?...这个问题常见于AJAX接收服务端返回值时候。服务端可能返回一个空字符串,这时候调用该接口会产生错误。必须向$.parseJSON传入合法JSON字符串。...需要指出:下面的问题在实际项目中从来没有碰到过,比较少见,但也无法保证一定不会出现在你项目中,仅供感兴趣程序员们参考吧。...$.attrFn方法 var keng1 = $.attrFn || {}; //该函数在jQuery内部调用,真实项目中从未见过,可忽略,这里只是为了触发一下错误警告 var keng2 =

    3.8K90

    Ajax进阶】跨域和JSONP学习

    什么同源策略   跨域     什么跨域     浏览器对跨域请求拦截     如何实现跨域数据请求 JSONP   JSONP实现原理   自己实现一个简单JSONP   JSONP缺点...CORS:出现较晚,它是W3C标准,属于跨域Ajax请求根本解决方案,支持GET和POST请求,缺点不兼容某些低版本浏览器。...jQuqery中JSONP jquery提供$.ajax()函数,除了可以发起真正Ajax数据请求之外,可以通过改变数据类型使其能够发起JSONP数据请求。...中JSONP实现过程 jQueryJSONP,也是通过script标签src属性实现跨域数据访问,只不过,jquery采用动态创建和移除script标签方式,来发起JSONP数据请求...防抖:如果事件被频繁触发,防抖能保证只有一次触发生效,前面的多次触发都会被忽略 节流:如果事件被频繁触发,节流能够减少事件触发频率,因此,节流有选择性执行一部分事件。

    1.2K30

    医疗数字阅片-医学影像-Lodash 一个一致性、模块化、高性能 JavaScript 实用工具库。_.throttle(func, , [option

    可以提供一个 options 对象决定如何调用 func 方法, options.leading 与|或 options.trailing 决定 wait 前后如何触发。 ...看下滚动事件例子: 当使用触控板,滚动滚轮,或者拖拽滚动条时候,一秒可以轻松触发30次事件。经测试,在智能手机上,慢慢滚动一下,一秒可以触发事件100次之多。...那样的话就跟原本非 debounce 处理无异了。 直到两次快速调用之间停顿结束,事件才会再次触发。 这是带 leading 标记例子: ?...基于 AJAX 请求自动完成功能,通过 keypress 触发 为什么用户还在输入时候,每隔50ms就向服务器发送一次 AJAX 请求?...建议直接使用 underscore 或 Lodash 。如果仅需要 _.debounce 和 _.throttle 方法,可以使用 Lodash 自定义构建工具,生成一个 2KB 压缩库。

    2.4K20

    【一起来烧脑】读懂JQuery知识体系

    背景 在现在就业过程中,会运用JQuery加分项,那么什么JQuery,嗯,jqueryJavaScript函数库,一种轻量级JavaScript库,写得少,做多,导致jQuery有很多技术人员在使用它做项目...从CDN中载入jQuery // 百度 </script...名称冲突$符号 jQuery使用名为noConflict()方法来解决该问题 $(selector).dblclick(function) 触发或将函数绑定到被选元素双击事件 $(selector...).mouseover(function) 触发或将函数绑定到被选元素鼠标悬停事件 jQuery 隐藏/显示 hide()和show()方法来隐藏和显示HTML元素 $("#hide").click...()方法 Not()方法 不匹配这个标准元素会被从集合中删除,匹配元素会被返回 Not()方法返回不匹配标准所有元素 jQuery AJAX AJAX与服务器交换数据技术 在不重载全部页面的情况下

    2.6K30

    Ajax等待返回结果时,弹出一个友好等待提示

    巧用AjaxbeforeSend 提高用户体验 jQuery经常使用一个开源js框架,其中$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作。...具体可参考jquery官方文档:http://api.jquery.com/Ajax_Events/ $.ajax({       beforeSend: function(){        ...默认:GET           url:"a.php",//(默认: 当前页地址) 发送请求地址           dataType:"html",//预期服务器返回数据类型。    ...ajaxSend 全局事件 请求开始前触发全局事件 success 局部事件 请求成功时触发。即服务器没有返回错误,返回数据也没有错误。...ajaxComplete 全局事件 全局请求完成时触发 ajaxStop 全局事件 当没有Ajax正在进行中时候,触发

    5K100

    Ajax等待返回结果时,弹出一个友好等待提示

    巧用AjaxbeforeSend 提高用户体验 jQuery经常使用一个开源js框架,其中$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作。...具体可参考jquery官方文档:http://api.jquery.com/Ajax_Events/ [html] view plain copy print?...默认:GET           url:"a.php",//(默认: 当前页地址) 发送请求地址           dataType:"html",//预期服务器返回数据类型。           ...ajaxSend 全局事件 请求开始前触发全局事件 success 局部事件 请求成功时触发。即服务器没有返回错误,返回数据也没有错误。...ajaxComplete 全局事件 全局请求完成时触发 ajaxStop 全局事件 当没有Ajax正在进行中时候,触发

    3.9K10
    领券