jquery ajax 请求小技巧实例分析


Posted in jQuery onNovember 11, 2019

本文实例讲述了jquery ajax 请求小技巧。分享给大家供大家参考,具体如下:

jquery   是一个非常好用的js框架,它为我们提供了很多工具。启动异步请求就是很好用的一个工具

官方推荐的ajax 请求格式

$.ajax({
   url:"http://xxxxxxxxxxxxxxxxx/",//你的域名
   dataType:"json",        //对服务器返回的结果进行该数据格式处理 我这里写了json 也可以红xml、text、html 等格式
   type:"get',           //请求到服务器的方式 我这里是get 也可以用其它形式 如post
   beforeSend:function(res){},   //在请求之前会调用这个方法  其中的res 就是XMLHttpRequest 对象
   success:function(result){}   //服务器返回的数据进行dataTyoe 设置的格式 处理后返回的结果
})

在这其中,$.ajax()  方法中传入的数据是一个json   这不难发现吧。  那我们完全可以这样去调用

var ajaxJson = {
   url:"http://xxxxxxxxxxxxxxxxx/",
  dataType:"json",
   type:"get',
   beforeSend:function(res){},  //在请求之前会调用这个方法  其中的res 就是XMLHttpRequest 对象
   success:function(result){}
}
$.ajax(ajaxJson);      //这样去使用。

如果我们想用户在某一个时刻只进行一个请求,而不会产生多余的请求怎么办呢?

在ajax 前面添加一个判定。

var ajax_oper = {
   ajax_status : true,             //当前ajax执行状态
   ajax_json : function(ajaxJson){
       if(!this.ajax_status) return false; // 当这个条件成立的时候,就认为当前有一个正在执行的ajax操作
       $.ajax(ajaxJson);
    }
}

然后 我们在ajaxJson变量中添加如下配置

var ajaxJson={
   url:"http://xxxxxxxxxxxxxxxxx/",
   dataType:"json",
   type:"get',
   beforeSend:function(res){
       ajax_oper.ajax_status = false;
   },
   success:function(result){
        ajax_oper.ajax_status = true;
   }
}
$.ajax(ajaxJson);

这样就可以在每次请求的时候判定一下 当前是否有正在执行的ajax请求 如果有就返回,不去执行。如果没有就执行。当一个ajax执行完毕后我们将ajax_oper的状态调整回来等待下一次请求的进行更改。

当然在移动web开发当中touch事件 有点违背原理,我们在测试的时候发现,在同一时间。touch事件被触发了多次,并且产生了多个ajax请求。更改ajax_status并没有起到作用,分析的方案是 touch事件灵敏到了,连ajax_oper的状态还没更改就已经被触发了多次,也就是在统一时间多个ajax请求都在执行$.ajax方法。这种解决方案,第一就是更改touch事件为click事件,第二就是添加多个ajax_oper 状态,层层判定(也有点不保险哈),第三就是更改后台逻辑处理,如在数据库处理的时候添加触发器,每次在更改的时候触发器会先处理一次,然后根据触发器的处理执行相应的处理。  对了,提示一下,在mysql innodb 表 事务处理过程中    也是会触发触发器的。根据结果进行commit 和 rollback。

更多关于jQuery相关内容可查看本站专题:《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
jQuery冲突问题解决方法
Jan 19 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 #jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 #jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 #jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 #jQuery
Javascript和jquery在selenium的使用过程
Oct 31 #jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 #jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 #jQuery
You might like
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python&MongoDB爬取图书馆借阅记录
2016/02/05 Python
Django实现网页分页功能
2019/10/31 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
浅谈django channels 路由误导
2020/05/28 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
企业业务员岗位职责
2014/03/14 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
学生保证书
2015/01/16 职场文书
整改通知书格式
2015/04/22 职场文书
房产证明范本
2015/06/19 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫
python数字图像处理:图像的绘制
2022/06/28 Python