jquery發起get/post請求_或_獲取html頁面數據

 備注：我們經常會遇到使用jquery獲取某個地址下的部分頁面內容，然后替換當前頁面對應內容，也就是：局部刷新功能。

當然也可以使用get/post請求獲取數據，修改數據，可以參考以下JS代碼：

 

走過的坑：

1-$.ajax   參數：  dataType  是區分大小寫的，寫成了datatype會不識別的？？？

2- window["Ajax"] = Ajax;   寫為：  window["Ajax"] =new Ajax();    這種單例如果作為全局變量報錯的話，在高並發的請求下會出現： window.Ajax 實例里參數信息是會共享，參數信息被覆蓋等問題？？？

3-$.ajax Post/Get  回調方法使用window.Ajax和this訪問屬性，這里經過改造后，在函數里面聲明一個： var _this=this;  就可以在回調函數內部實現 內部實例數據共享了，也會防止出錯？？？

 

下面JS的使用示例：

new window.Ajax().Init_Two("postUrl", { u: userid, e: base64Email, t: token }, function (jsonData) {
　　//success code
}).Post();

自定義模擬類-其中Init()方法是個人項目需要使用，大家可以使用Init_Two方法初始化，如上示例：

// 2-Ajax模擬類
var Ajax = function () {
    var _this = this;
    //請求路徑
    _this.ajaxUrl = "";
    //傳入的參數對象
    _this.data = {};
    //返回數據類型：json/jsonp/xml/text...
    _this.dataType = "text";
    //是否異步
    _this.isAsync = true,
    //回調函數
    _this.rollBack = function (result) {
    };

    _this.Init = function (handlerName, actionName, dataObject, rollBack) {
        _this.ajaxUrl = "/ajax/" + handlerName + ".js?action=" + actionName;
        _this.data = dataObject;
        _this.rollBack = rollBack;
        return _this;
    };
    _this.Init_Two = function (actionUrl, dataObject, rollBack) {
        _this.ajaxUrl = actionUrl;
        _this.data = dataObject;
        _this.rollBack = rollBack;
        return _this;
   };

    //Get請求
    _this.Get = function (dataType, isAsync) {
        if (dataType != null) {
            _this.dataType = dataType;
        };
        if (isAsync != null) {
            _this.isAsync = isAsync;
        };
        $.ajax({
            type: "GET",
            url: _this.ajaxUrl,
            data: _this.data,
            dataType: _this.dataType,
            async: _this.isAsync,//false代表只有在等待ajax執行完畢后才執行
            success: function (json) {
                var result = json;
                if (_this.dataType == "text") {
                    try {
                        result = JSON.parse(json);
                    } catch (e) {
                        result = new Function("return " + json)();
                    }
                }
                if (_this.rollBack && _this.rollBack instanceof Function) {
                    _this.rollBack(result);
                }
            },
            error: function (e) {
                console.log(e);
            }
        });
    };
    //獲取請求地址的HTML內容(select選擇器,是否異步)
    _this.GetHtml = function (jquerySelectDom, isAsync) {
        if (isAsync != null) {
            _this.isAsync = isAsync;
        }
        $.ajax({
            type: "GET",
            url: _this.ajaxUrl,
            data: _this.data,
            dateType: "html",
            //false代表只有在等待ajax執行完畢后才執行
            async: _this.isAsync,
            success: function (data) {
                if (jquerySelectDom != "") {
                    var $data = $(data);
                    //由於$data是個集合，得到的是所有一級節點的jquery集合，所以，先從一級集合中找，再從所有子元素中找
                    var $result = $data.next(jquerySelectDom);
                    if ($result.length == 0) {
                        $result = $data.find(jquerySelectDom);
                    }
                    var resultHtml = "";
                    if ($result.length > 0) {
                        resultHtml = $result.html();
                    }
                    if (_this.rollBack && _this.rollBack instanceof Function) {
                        _this.rollBack(resultHtml);
                    }
                } else {
                    return data;
                }
            }
        });
    };
    //普通Post請求（請求地址：postUrl,,是否異步）
    _this.Post = function (dataType, isAsync) {
        if (dataType != null) {
            _this.dataType = dataType;
        };
        if (isAsync != null) {
            _this.isAsync = isAsync;
        };
        $.ajax({
            type: "POST",
            url: _this.ajaxUrl,
            data: _this.data,
            dataType: _this.dataType,
            //false代表只有在等待ajax執行完畢后才執行
            async: _this.isAsync,
            success: function (json) {
                var result = json;
                if (_this.dataType == "text") {
                    try {
                        result = JSON.parse(json);
                    } catch (e) {
                        result = new Function("return " + json)();
                    }
                }
                if (_this.rollBack && _this.rollBack instanceof Function) {
                    _this.rollBack(result);
                }
            },
            error: function (e) {
                console.log(e);
            }
        });
    };
    //模擬Form表單請求-參數為FormData對象
    _this.FormPost = function () {
        $.ajax({
            type: "POST",
            url: _this.ajaxUrl,
            data: _this.data,
            //false代表只有在等待ajax執行完畢后才執行
            async: _this.isAsync,
            processData: false,
            contentType: false,
            success: function (json) {
                try {
                    result = JSON.parse(json);
                } catch (e) {
                    result = new Function("return " + json)();
                }
                if (_this.rollBack && _this.rollBack instanceof Function) {
                    _this.rollBack(result);
                }
            },
            error: function (e) {
                console.log(e);
            }
        });
    };
};
window["Ajax"] = Ajax;