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 相关文章推荐
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
ExtJS DOM元素操作经验分享
Aug 28 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
vue路由教程之静态路由
Sep 03 Javascript
vue - vue.config.js中devServer配置方式
Oct 30 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
electron踩坑之remote of undefined的解决
Oct 06 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下获取客户端ip地址的函数
2010/03/15 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
javascript每日必学之继承
2016/02/23 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
python django model联合主键的例子
2019/08/06 Python
构建高效的python requests长连接池详解
2020/05/02 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
python如何调用java类
2020/07/05 Python
Python-split()函数实例用法讲解
2020/12/18 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
董事长秘书职责
2014/01/31 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书