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>