jquery Ajax 全局调用封装实例详解


Posted in Javascript onJanuary 16, 2017

前言:

有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....})

写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的!

【嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人】

jQuery Ajax通用js封装

第一步:引入jQuery库

<script type="text/javascript" src="/js/jquery.min.js"></script>

第二步:开发Ajax封装类,已测试通过,可以直接调用,直接贴代码,讲解就省了

/*****************************************************************
         jQuery Ajax封装通用类 (linjq)    
*****************************************************************/
$(function(){
  /**
   * ajax封装
   * url 发送请求的地址
   * data 发送到服务器的数据,数组存储,如:{"date": new Date().getTime(), "state": 1}
   * async 默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。
   *    注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
   * type 请求方式("POST" 或 "GET"), 默认为 "GET"
   * dataType 预期服务器返回的数据类型,常用的如:xml、html、json、text
   * successfn 成功回调函数
   * errorfn 失败回调函数
   */
  jQuery.ax=function(url, data, async, type, dataType, successfn, errorfn) {
    async = (async==null || async=="" || typeof(async)=="undefined")? "true" : async;
    type = (type==null || type=="" || typeof(type)=="undefined")? "post" : type;
    dataType = (dataType==null || dataType=="" || typeof(dataType)=="undefined")? "json" : dataType;
    data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;
    $.ajax({
      type: type,
      async: async,
      data: data,
      url: url,
      dataType: dataType,
      success: function(d){
        successfn(d);
      },
      error: function(e){
        errorfn(e);
      }
    });
  };
  
  /**
   * ajax封装
   * url 发送请求的地址
   * data 发送到服务器的数据,数组存储,如:{"date": new Date().getTime(), "state": 1}
   * successfn 成功回调函数
   */
  jQuery.axpost=function(url, data, successfn) {
    data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;
    $.ajax({
      type: "post",
      data: data,
      url: url,
      dataType: "json",
      success: function(d){
        successfn(d);
      }
    });
  };
  
  /**
   * ajax封装
   * url 发送请求的地址
   * data 发送到服务器的数据,数组存储,如:{"date": new Date().getTime(), "state": 1}
   * dataType 预期服务器返回的数据类型,常用的如:xml、html、json、text
   * successfn 成功回调函数
   * errorfn 失败回调函数
   */
  jQuery.axspost=function(url, data, successfn, errorfn) {
    data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;
    $.ajax({
      type: "post",
      data: data,
      url: url,
      dataType: "json",
      success: function(d){
        successfn(d);
      },
      error: function(e){
        errorfn(e);
      }
    });
  };



});

第三步:调用模拟

<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath%>">

    <title>jQuery Ajax封装通用类测试</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <jsp:include page="/view/common/js_taglib.jsp"></jsp:include>
    <script type="text/javascript">
    $(function(){
      $.ax(
        getRootPath()+"/test/ajax.html",
        null,
        null,
        null,
        null, 
        function(data){
          alert(data.code);
        }, 
        function(){
          alert("出错了");
        }
      );
      
      $.axpost(getRootPath()+"/test/ajax.html", null, function(data){
        alert(data.data);
      });
    
      $.axspost(getRootPath()+"/test/ajax.html",
        null, 
        function(){
          alert("成功了");
        },
        function(){
          alert("出错了");
      });
    });
     </script>
  </head>
  <body>
     
  </body>
</html>
$.axpost(getRootPath()+"/test/ajax.html", null, function(data){
        alert(data.data);
      });

如上代码:只要填写 url,和要传输的 data 字段就行了,避免了重复工作和代码冗余。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
理解javascript中的严格模式
Feb 01 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 #Javascript
函数四种调用模式以及其中的this指向
Jan 16 #Javascript
js实现导航栏中英文切换效果
Jan 16 #Javascript
Bootstrap面板使用方法
Jan 16 #Javascript
codeMirror插件使用讲解
Jan 16 #Javascript
微信小程序 图片边框解决方法
Jan 16 #Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 #Javascript
You might like
php插入mysql数据返回id的方法
2018/05/31 PHP
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python解析xml模块封装代码
2014/02/07 Python
跟老齐学Python之重回函数
2014/10/10 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
经管应届生求职信
2013/11/17 职场文书
测绘工程专业个人自我评价
2013/12/01 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
社区母亲节活动记录
2014/03/06 职场文书
总经理任命书
2014/03/29 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
护林员个人总结
2015/03/04 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫