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 相关文章推荐
Jquery获取radio选中的值
May 05 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jquery实现的放大镜效果示例
Feb 24 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
PHP内核探索之变量
2015/12/22 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
详谈javascript异步编程
2016/02/21 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
js实现弹窗效果
2020/08/09 Javascript
python实现ip查询示例
2014/03/26 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
python绘制简单彩虹图
2018/11/19 Python
Python实现网站表单提交和模板
2019/01/15 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
python 通过exifread读取照片信息
2020/12/24 Python
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
写给老婆的检讨书
2014/02/21 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
维稳工作情况汇报
2014/10/27 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
学习与创新自我评价
2015/03/09 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL