关于JavaScript中获取和设置Url参数的说明

在Web编程时,一般我们都只是在服务端获取请求的Url参数,但是在前端交互过程中我们也有可能希望通过JavaScript获取Url中的参数。
我们可以通过以下JavaScript方式获取和设置Url中的参数信息:

一、定义Url参数操作方法:

// 定义获取和设置Url参数的方法
(function (window, undefined) {
    // 定义获取Url参数方法
    if (typeof (window.getUrlParam) != "function") {
        /**
        * url:要获取参数的Url
        * key:要获取参数的键
        * return:返回获取到的参数值
        */
        window.getUrlParam = function (url, key) {
            // 定义默认值
            var value = "";
            // 定位到Url参数部分
            var index = url.indexOf("?");
            if (index >= 0) {
                // 获取Url中参数集合
                var params = url.substr(index + 1);
                params = params.split("&");
                // 遍历查询对应键值的参数
                for (var param in params) {
                    param = params[param];
                    index = param.indexOf("=");
                    // 获取对应键值的参数值
                    if (index >= 0 && key == param.substring(0, index)) {
                        value = param.substr(index + 1);
                    }
                }
            }
            // 返回获取到的参数值
            return value;
        };
    }
    // 定义设置Url参数方法
    if (typeof (window.setUrlParam) != "function") {
        /**
        * url:要设置参数的Url
        * key:要设置参数的键
        * value:要设置参数值
        * return:返回设置了参数的新Url
        */
        window.setUrlParam = function (url, key, value) {
            // 定位到Url参数部分
            var index = url.indexOf("?");
            if (index >= 0) {
                // 获取Url中参数集合
                var baseUrl = url.substring(0, index);
                var hasKey = false;
                var newParams = new Array();
                var oldParams = url.substr(index + 1);
                oldParams = oldParams.split("&");
                // 遍历Url中所有的参数
                for (var oldParam in oldParams) {
                    oldParam = oldParams[oldParam];
                    index = oldParam.indexOf("=");
                    if (index >= 0 && key == oldParam.substring(0, index)) {
                        // 将需要设置的参数重新赋值
                        newParams.push(key + "=" + value);
                        hasKey = true;
                    } else {
                        // 记录不需要设置的参数信息
                        newParams.push(oldParam);
                    }
                }
                // 没有找到参数的话添加新的参数
                if (!hasKey) {
                    newParams.push(key + "=" + value);
                }
                // 重构设置了参数的Url
                newParams = newParams.join("&");
                url = baseUrl + "?" + newParams;
            } else {
                // 重构设置了参数的Url
                url += "?" + key + "=" + value;
            }
            // 返回设置了参数的新Url
            return url;
        };
    }
})(window);

二、调用实例:

getUrlParam("index.php?a=1", "a"); // 结果:1
setUrlParam("index.php?a=1", "a", 2); // 结果:index.php?a=2

发表评论