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树插件zTree使用方法详解
May 02 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jquery实现简单拖拽效果
Jul 20 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+MSSQL分页的例子
2006/10/09 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
VC++笔试题
2014/10/13 面试题
质检员的岗位职责
2013/11/15 职场文书
《影子》教学反思
2014/02/21 职场文书
家长学校实施方案
2014/03/15 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
幼师自荐信范文
2015/03/06 职场文书
教研活动主持词
2015/07/03 职场文书
小学班级口号大全
2015/12/25 职场文书
初中美术教学反思
2016/02/17 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS