jQuery Ajax 全局调用封装代码

  • 更新时间:2020-04-26 10:27:04
  • 编辑:宫明达
我们帮大家精选了jquery相关的编程文章,网友吕裕梅根据主题投稿了本篇教程内容,涉及到jquery、ajax全局、ajax封装、jQuery Ajax 全局调用封装实例代码详解相关内容,已被136网友关注,下面的电子资料对本篇知识点有更加详尽的解释。
  • 锋利的jQuery / 194.9 MB 推荐度:
  • 《轻松玩转jQuery》源代码 / 649.46 KB 推荐度:
  • jQuery EasyUI开发指南 / 48.4 MB 推荐度:
  • jQuery 前端开发实战 / 48.51MB 推荐度:
  • 《jQuery Mobile从入门到精通》电子资源 / 2 GB 推荐度:
  • jQuery Ajax 全局调用封装实例代码详解

    有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.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 字段就行了,避免了重复工作和代码冗余。

    以上内容是小编给大家介绍的jQuery Ajax 全局调用封装实例代码详解的相关内容,希望对大家有所帮助!

    jquery相关教程

    用户留言