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插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
jQuery实现全选按钮
Jan 01 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面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
python用户管理系统的实例讲解
2017/12/23 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
python中的global关键字的使用方法
2019/08/20 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
python自动发微信监控报警
2019/09/06 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
初中升旗仪式演讲稿
2014/05/08 职场文书
员工趣味活动方案
2014/08/27 职场文书
解放思想演讲稿
2014/09/11 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
七一表彰大会简报
2015/07/20 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js