Jquery Ajax二次封装(部分转载)

/*

ajax调用扩展

 */

$.extend($,{

    ajaxGetJson:function(url,data,callback)

    {

        $.ajax({

            url:url,

            data:data,

            datatype:"json",

            method:"get",

            contentType: "application/json",

            beforeSend:function(){

                //myLoad();//打开加载层

            },

            complete:function(data){

                //closeLoad();//关闭加载层

            },

            success: function(msg) {

                if (typeof callback != ‘undefined‘)

                    callback.call(this, msg);

            }

        });

    },

    ajaxPostJson:function(url,data,callback)

    {

        $.ajax({

            url:url,

            data:data,

            datatype:"json",

            method:"post",

            contentType: "application/json",

            beforeSend:function(){

                //myLoad();//打开加载层

            },

            complete:function(data){

                //closeLoad();//关闭加载层

            },

            success: function(msg) {

                if (typeof callback != ‘undefined‘)

                    callback.call(this, msg);

            }

        });

    }

});


参考示例:

function AjaxMethod() {

            //this.init.apply(this, arguments);

       }

       AjaxMethod.prototype = {


           init: function() {

               debugger;

           },

           GetJson: function() {

               jQuery.getJSON(

                 "Json.ashx",

                 { name: ‘test‘, age: 32 },

                  function(data) {

                 debugger;

                 var txt = eval(data);

                  //var obj = data.toJSONString(); //由JSON字符串转换为JSON对象

                 var objs = JSON.stringify(data); //由JSON字符串转换为JSON对象

                      alert(txt);

                  })

           },

           GetAjax: function() {

               jQuery.ajax({

                   url: "Json.ashx",

                   type: "get",

                   dataType: "json",

                   contextType: "application/json; charset=utf-8",

                   data: { name: ‘test‘, age: 32 },

                   success: function(data) {

                       debugger;

                       jQuery.each(data, function(i) {


                       });


                   },

                   error: function() {

                       //请求出错处理

                       alert(1);

                   }

               })

           },

           PostAjax: function() {

               jQuery.post(

                "Json.ashx",

                {

                    name: userName,

                    age: 12

                    // ajaxMethod: "Login"

                },

                function(data) {

                    var d = data;

                },

                "json"

                );

           }



       } 

  var method=new AjaxMethod();



封装 jquery ajax,加入loading加载


$.extend($, {  

    /*  

    *ajax调用封装,返回json 

    * url 服务路径 

    * data一般为js对象 

    * callback 回调函数 

    */  

    MyAjax: function(url, data, callback) {  

        $.ajax({  

            url: url,  

            data: data,  

            dataType:‘json‘,  

            method: "post",  

            beforeSend:function(){  

                myLoad();//打开加载层  

            },  

            complete:function(data){  

            closeLoad();//关闭加载层  

        },  

            success: function(msg) {  

                if (typeof callback != ‘undefined‘)  

                    callback.call(this, msg);  

            }  

        });  

    }  

});  


使用:  

$.MyAjax("/test","data=1",callBack);  

  

function callBack(json){  

    alert(json.msg);  

}  


jQuery Ajax通用js封装

/*****************************************************************

                  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.axs=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.axse=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);

            }

        });

    };

});


模拟调用

<%@ page language="java" pageEncoding="utf-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://"

            + request.getServerName() + ":" + request.getServerPort()

            + path + "/";

%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<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("出错了");

                }

            );

            

            $.axs(getRootPath()+"/test/ajax.html", null, function(data){

                alert(data.data);

            });

        

            $.axse(getRootPath()+"/test/ajax.html",

                null, 

                function(){

                    alert("成功了");

                },

                function(){

                    alert("出错了");

            });

        });

          </script>

    </head>

    <body>

         

    </body>

</html>


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。