ajax的請求，參數怎麼管理？

時間 2019-12-05

標籤 ajax 請求參數怎麼管理欄目 Ajax 简体版

原文原文鏈接

通常發送一條ajax 而後點擊界面須要更改查詢條件，第一種是作一個form表單比較合適的設計。更改了參數回收表單而後從新發送ajax；css

還有一種是把參數緩存到變量中，而後更改了條件修改變量再次重發ajax。html

個人是第二種思路實現方式以下：node

有不一樣看法的童鞋歡迎拍磚，接受任何方式的反駁好比微信紅包走一波。ajax

/**
 * =======================================================================
 ***--------------------------加載一個等待提示框--------------------------
 * =======================================================================
 * 配置項：｛｝
 *@target: "body",//須要展現的遮罩的對象
 *@cssName: "_showloading",//class名稱，能夠自定義class
 *@loadingImg: "/static/themes/vocs/ui-images/loading.gif",//遮罩圖片的路徑
 *@loadingText: "數據正在加載,請稍後...",//提示層的提示文字
 *@hideCall: null,//關閉回調函數
 *@timeout: 0//是否自動關閉
 * @param {Object} {target:'',cssName:'',loadingImg:'',loadingText:''}
 */
function ShowLoading(opt) {
    // 默認配置項
    var _default = {
        'target': 'body', // 須要展現的遮罩的目標
        'cssName': '_showloading', // class名稱，能夠自定義class
        'loadingText': '數據正在加載,請稍後...', // 提示層的提示文字
        'hideCall': null, // 關閉回調函數
        'timeout': 0 // 是否自動關閉
    }
    $.extend(this, _default, opt)
    if (typeof this.target == 'string')
        this.target = $(this.target)
    if (typeof context != 'undefined')
        this.loadingImg = context + this.loadingImg
}

ShowLoading.prototype.show = function (msg, callBack) {
    var me = this
    var isBody = $(me.target).prop('nodeName') == 'BODY'
    // 獲取目標的大小
    var getSize = function () {
        var scrollTop = isBody ? $(window).scrollTop() : $(me.target).scrollTop()
        var scrollLeft = isBody ? $(window).scrollLeft() : $(me.target).scrollLeft()
        // var w = isBody ? (scrollLeft+$(window).width()) : (scrollLeft+$(me.target).width())
        // var h = isBody ? (scrollTop + $(window).height()) : (scrollTop + $(me.target).height())
        var w = isBody ? ($(window).width()) : ($(me.target).width())
        var h = isBody ? ($(window).height()) : ($(me.target).height())
        return {width: w, height: h, scrollTop: scrollTop, scrollLeft: scrollLeft}
    }
    if (!this.$loading) {
        this.loadingId = '_load' + (new Date()).valueOf()
        if (!isBody)
            $(me.target).css('position', 'relative')
        this.$loading = $('<div>', {
            'id': this.loadingId,
            'class': this.cssName,
            // "style": "border:1px solid red",
            "html": "<div class='" + this.cssName + "-msg'>" + this.loadingText + "</div>"
        }).appendTo(this.target)
        var setPostion = function () {
            me.$loading.css({
                // width: getSize().width + "px",
                width: getSize().width + 'px',
                height: getSize().height + 'px',
                top: getSize().scrollTop + 'px',
                left: getSize().scrollLeft + 'px'
            })
            var sefWidth = me.$loading.children("." + me.cssName + "-msg").width(),
                sefHeight = me.$loading.children("." + me.cssName + "-msg").height()
            me.$loading.children("." + me.cssName + "-msg").css({
                'top': function () {
                    return parseInt((getSize().height - sefHeight) / 2) + 'px'
                },
                'left': function () {
                    return parseInt((getSize().width - sefWidth) / 2) + 'px'
                }
            })
        }
        this.setPsIntv = setInterval(function () {
            setPostion()
        }, 50)
    }
    if (msg) {
        this.loadingText = msg
        this.$loading.children().text(msg)
    }

    // 是否有回調函數
    if (callBack != undefined && typeof callBack == 'function') {
        this.hideCall = callBack
    }
    // 是不是定時關閉
    if (this.timeout > 0) {
        setTimeout(function () {
            me.hide()
        }, this.timeout)
    }
    return this
}
ShowLoading.prototype.hide = function () {
    if (this.$loading) {
        this.$loading.remove()
        this.$loading = null
    }
    if (typeof this.hideCall == 'function') {
        this.hideCall()
    }
    if (this.setPsIntv)
        clearInterval(this.setPsIntv)
}
ShowLoading.prototype.update = function (msg) {
    if (this.$loading) {
        this.$loading.children().text(msg);
    }
}

View Code

/**
 * AJAX構造函數
 * @param url 請求地址 String
 * @param param 請求參數 Object
 * @param callback 回調函數 Function
 */
function AJAX_Method(url, param, callback) {
    this.url = url;
    this.param = param;
    this.callback = callback;
    this.method = "GET";
    this.isLoading = false;
}

/*擴展實例方法*/
AJAX_Method.prototype = {
    /**
     *get請求
     */
    get: function () {
        var _this = this;
        if (_this.isLoading) {
            _this.showLoading();
        }
        $.get(_this.url, _this.param, function (response) {
            if (_this.isLoading) {
                _this.hideLoading();
            }
            _this.callback(response);
        });
    },
    /**
     *post請求
     */
    post: function () {
        var _this = this;
        if (_this.isLoading) {
            _this.showLoading();
        }
        $.post(_this.url, _this.param, function (response) {
            if (_this.isLoading) {
                _this.hideLoading();
            }
            _this.callback(response);
        });
    },
    /**
     * 從新請求
     * @param name 參數名稱 | 對象
     * @param value 參數值
     */
    reload: function (name, value) {
        if (name) {
            this.setParam(name, value);
        }
        this.method.toLocaleLowerCase() == "get" ? this.get() : this.post();
    },
    /**
     * 獲取請求參數
     * @returns {*}
     */
    getParam: function () {
        return this.param;
    },
    /**
     * 設置參數
     * @param name 參數名稱 | 對象
     * @param value 參數值
     */
    setParam: function (name, value) {
        if (typeof name == "string") {
            this.param[name] = value;
        } else {
            $.extend(this.param, name)
        }

    },
    /**
     * 展現遮罩動畫
     */
    showLoading: function (opt) {
        if (this.loading) {
            this.hideLoading();
        }
        this.loading = getTopWindow().AJAX_Loading(opt);
    },
    /**
     * 影藏遮罩動畫
     */
    hideLoading: function () {
        if (this.loading) {
            this.loading.hide();
            this.loading = null;
        }
    }
}

/**
 *
 * @returns {Window | WorkerGlobalScope}
 */
function getTopWindow() {
    var _top = self;
    while (_top != _top.parent) {
        if (typeof _top.parent.AJAX_Method != "undefined") {
            _top = _top.parent;
            continue;
        }
        break;
    }
    return _top;
}

/**
 * 封裝get請求
 */
function AJAX_GET(url, param, callback) {
    var ajax = new AJAX_Method(url, {}, new Function());
    //處理參數無序
    for (var i = 1; i < arguments.length; i++) {
        var parameter = arguments[i];
        var typeName = typeof parameter;
        if ("boolean" == typeName) {
            ajax.isLoading = parameter;
        } else if ("object" == typeName) {
            ajax.param = parameter;
        } else if ("string" == typeName) {
            ajax.method = parameter;
        } else if ("function" == typeName) {
            ajax.callback = parameter;
        }
    }
    //發送請求
    ajax.get();
    return ajax;
}

/**
 * 封裝post請求
 */
function AJAX_POST(url, param, callback) {
    var ajax = new AJAX_Method(url, {}, new Function());
    //處理參數無序
    for (var i = 1; i < arguments.length; i++) {
        var parameter = arguments[i];
        var typeName = typeof parameter;
        if ("boolean" == typeName) {
            ajax.isLoading = parameter;
        } else if ("object" == typeName) {
            ajax.param = parameter;
        } else if ("string" == typeName) {
            ajax.method = parameter;
        } else if ("function" == typeName) {
            ajax.callback = parameter;
        }
    }
    ajax.method = "POST";
    //發送請求
    ajax.post();
    return ajax;
}

/**
 * 展現動畫
 * @param opt
 * @returns {ShowLoading|ShowLoading}
 * @constructor
 */
function AJAX_Loading(opt) {
    var loading = new ShowLoading(opt);
    loading.show();
    return loading;
}

//測試示例：


//標準發送請求
var getUserInfo = AJAX_GET("test.json", {name: "張三李四"}, function (data) {
    alert(1);
}, true);
// 參數無序調用
/*var getUserInfo2 = AJAX_GET("test.json", function (data) {
    alert(1);
})*/


//設置單個參數
getUserInfo.setParam("name", "李四張三");
//設置多參數
getUserInfo.setParam({"name":"李四張三","time": "2019/12/04"});

console.log(getUserInfo.param);
//刷新結果
getUserInfo.reload({"time": "2019/12/12"});
//或者
getUserInfo.get();
//把請求方式修改爲post
getUserInfo.post();