详解闭包解决jQuery中AJAX的外部变量问题
详解闭包解决jQuery中AJAX的外部变量问题
在AJAX中,我们经常都要使用外部变量,经常会多次使用,如下代码
function getCarInfo(){ for(var i=0;i<4;i++){ var carId = $("#carList0"+i+" #carId").val(); var request = { city: city, carId: carId }; $.ajax({ url:"enquiry", type:'post', data:request, //async: false, success:function(data){ //alert(data); var strArr = data.split("#"); $("#carList0"+i+" #distributorId").val(strArr[0]); $("#carList0"+i+" #font16").html(strArr[strArr.length-1]); } }); } }
我期待的是按顺序alert(1) alert(2) alert(3) alert(4),但是实际上三次都是alert(4)
这均是由于AJAX异步导致的问题,设置同步(async: false,)就可以解决这个问题,但是随之而来的是,效率减低很多。这时可以轻松使用闭包解决问题:
function getCarInfo(){ for(var i=0;i<4;i++){ ((function(i){ var carId = $("#carList0"+i+" #carId").val(); var request = { city: city, carId: carId }; $.ajax({ url:"enquiry", type:'post', data:request, //async: false, success:function(data){ //alert(data); var strArr = data.split("#"); $("#carList0"+i+" #distributorId").val(strArr[0]); $("#carList0"+i+" #font16").html(strArr[strArr.length-1]); } }); }(i))); } }
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
相关推荐
-
jQuery命名空间与闭包用法示例
本文实例讲述了jQuery命名空间与闭包用法.分享给大家供大家参考,具体如下: /* * 服务公司用户汇总,审核 */ (function() { "use strict"; var companyList=new Object();//声明命名空间 //时间戳格式化为时间 companyList.getLocalTime = function(nS){ return new Date(parseInt(nS)).toLocaleString().substr(0,17); } //节
-
jquery设置css样式的多种方法(总结)
设置css样式的多种方法总结,jquery <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> </style> </head> <body> <ul> <li>兄弟多个1</li&
-
jQuery实现鼠标跟随效果
所谓鼠标跟随,一般就是指鼠标移到哪张图片上,那该张图片的放大图片就会出现,并且放大图片会随着鼠标在该张图片上移动而移动. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } img{ border:none; }
-
javascript,jquery闭包概念分析
但javascript我是经常要用,所以是要懂这里面的概念. 其实javascript里的闭包概念很简单,就是函数用到外部变量,不需要传参就可以获取. 举个例子: 复制代码 代码如下: <script> var sMessage = "Hello world"; function sayHello(){ alert(sMessage); } sayHello(); addNumber(1,2); var iBaseNum = 10; function addNumber(i
-
Webpack+Vue如何导入Jquery和Jquery的第三方插件
创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; export default $; 导入JQuery,并赋值给window对象,使其成为一个全局变量. 在vue组件做如下引用 import $ from './assets/jquery-v'; import 'bootstrap-material-design'; //调用初始化 $(function(
-
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Bootstrap风格的分页控件自适应的: 参考网址:分页参考文档 1.风格样式: 2.首先引入js文件jQuery.twbsPagination.js <span style="font-size:14px;"><script type="text/javascript" src="plugins/page/jquery.twbsPagination.js"></script></span> 3.
-
写jQuery插件时的注意点
写好jQuery插件,有一些注意的地方(持续添加). 支持UMD 现在前端开发讲究模块化,所以jQuery插件也最好能够兼顾模块化. 模块化模式大概有几种: AMD.CommonJs.UMD. AMD(Asynchronous Module Definition) 异步模块定义,可以异步的加载或依赖其他模块,支持的库如 Require.js, Sea.js . 例子: // xxx-plugin.js define(['jquery'], function ($) { function myFu
-
详解闭包解决jQuery中AJAX的外部变量问题
详解闭包解决jQuery中AJAX的外部变量问题 在AJAX中,我们经常都要使用外部变量,经常会多次使用,如下代码 function getCarInfo(){ for(var i=0;i<4;i++){ var carId = $("#carList0"+i+" #carId").val(); var request = { city: city, carId: carId }; $.ajax({ url:"enquiry", type:
-
Jquery中$.ajax()方法参数详解
俗说好记性不如个烂笔头,下面是jquery中的ajax方法参数详解,这里整理了一些供大家参考. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. 3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置. 4.async:
-
jQuery中ajax - post() 方法实例详解
在jquery中的ajax有二个数据发送模式,一种是get,另一种是post(). jQuery Ajax 参考手册 实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp
-
jQuery中ajax - get() 方法实例详解
在jquery中使用get,post和ajax方法给服务器端传递数据,在上篇文章给大家分享了jquery中ajax-post()方法实例,下面通过本文继续学习jQuery中ajax - get() 方法,具体介绍请看下文. jQuery Ajax 参考手册 实例 使用 AJAX 的 GET 请求来改变 div 元素的文本: $("button").click(function(){ $.get("demo_ajax_load.txt", function(resul
-
详解jQuery中ajax.load()方法
jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector).load(URL,data,callback); load()函数用于从服务器加载数据,并使用返回的html内容替换当前匹配元素的内容. load()函数默认使用GET方式,如果提供了对象形式的数据,则自动转为POST方式. 因为默认使用的是Get请求方式,所以我们也可以在url加数据进行提交. 例
-
jQuery中ajax的load()与post()方法实例详解
本文实例讲述了jQuery中ajax的load()与post()方法.分享给大家供大家参考,具体如下: 一.load()方法 在jQuery ajax的load()方法能够载入远程 HTML 文件代码并插入至 DOM 中,这个与post,get还是有一点的区别,但可以快速在页面加载时就加载一个页面的html保存到dom中并且可执行哦. load()方法默认使用 GET 方式, 如果传递了data参数则使用Post方式. 传递附加参数时自动转换为 POST 方式.jQuery 1.2 中,可以指定
-
jQuery中Ajax的load方法详解
先来看一个Ajax例子 复制代码 代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="Ajax提交" onc
-
Python中str is not callable问题详解及解决办法
Python中str is not callable问题详解及解决办法 问题提出: 在Python的代码,在运行过程中,碰到了一个错误信息: python代码: def check_province_code(province, country): num = len(province) while num <3: province = ''.join([str(0),province]) num = num +1 return country + province 运行的错误信息: check
-
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Object.success,但后台能够返回数据,原代码如下: var source=[]; $.ajax({ type: "post", url: "connectdb/select.jsp", data: {database: "scmdb", selec
-
详解在.net core中完美解决多租户分库分表的问题
前几天有人想做一个多租户的平台,每个租户一个库,可以进行水平扩展,应用端根据登录信息,切换到不同的租户库 计划用ef core实现,他们说做不出来,需要动态创建dbContext,不好实现 然而这个使用CRL很轻松就能解决了 以下为演示数据库,有两个库testdb和testdb2,查询结果如下 目标: 根据传入登录信息连不不同的库,查询返回结果,如登录人为01,返回d1.default,登录人为02 返回 d2.default 实际上这个需求就是分库分表的实现,通过设置数据库/表映射关系,根据传
随机推荐
- 详解PHP正则表达式替换实现(PHP preg_replace,PHP preg_replace)
- jQuery最佳实践完整篇
- android 关于利用签名的SHA1进行安全校验的方法之一(推荐)
- Could not load file or assembly "App_Licenses.dll"的问题
- jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
- JavaScript 身份证号有效验证详解及实例代码
- php+mysql+ajax实现单表多字段多关键词查询的方法
- php的socket编程详解
- CentOS 6.X系统下升级Python2.6到Python2.7 的方法
- 全面解析JavaScript里的循环方法之forEach,for-in,for-of
- JavaScript动态检验密码强度的实现方法
- c# winform读取xml文件创建菜单的代码
- PHP字符串中插入子字符串方法总结 原创
- Windows下Memcache的安装及PHP扩展配置方法
- Android实现网易Tab分类排序控件实现
- java多线程编程之从线程返回数据的两种方法
- PHP使用SOAP扩展实现WebService的方法
- Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
- iOS中WKWebView仿微信加载进度条
- 实例讲解易语言复制数组