JS实现URL参数添加删除功能

Gary

8 年前

JS实现URL参数添加删除功能，在线演示。HTML使用范例：

<html>
<head>
<script src="jquery-3.0.0.min.js"></script>
<script src="url-param.js"></script>
</head>

<body>
<span class="add" target="tag" value="1">添加</span><br />
<span class="add" target="tag" value="2">修改</span><br />
<span class="delete" target="tag" value="3">删除</span><br />
<span class="add" target="key" value="a">添加另外一条</span><br />

<script>
	$(".add").on("click", function() {
		var target = $(this).attr("target");
		var value = $(this).attr("value");
		webUI.addParama(target, value);
	})
	$(".delete").on("click", function() {
		var target = $(this).attr("target");
		webUI.delParama(target);
	})
</script>
</body>
</html>

Javascript代码：

var webUI = {
    //添加url参数
    addParama: function(key, val) {
        var search = window.location.search;
        if (search.indexOf('?') != -1) {
            search = search.substring(1);
            var search_arr = search.split('&');
            var url_arr = [];
            var exists = 0;
            for (var i = 0; i < search_arr.length; i++) {
                if (!search_arr[i])
                    continue;
                var temp = search_arr[i].split('=');
                if (key == temp[0]) {
                    exists = 1;
                    url_arr.push(key + '=' + val);
                } else {
                    if (temp[0] != 'page' && temp[0] != 'token') {
                        url_arr.push(search_arr[i]);
                    }
                }
            }
            if (!exists)
                url_arr.push(key + '=' + val);
            url = window.location.pathname + '?' + url_arr.join('&');
        } else {
            url = window.location.pathname + '?' + key + '=' + val;
        }
        window.location.href = url;
    },
    /*
     *  添加url参数
     *  jsonArr: 添加参数数组
     *  delArr: 删除参数数组
     *  demo: webUI.addMultiParama([{'key':'from', 'val':from}, 
     *  {'key':'to', 'val':to}], [{'key':'recently'}]);
     */
    addMultiParama: function(jsonArr, delArr) {
        var delArr = delArr || [];
        var search = window.location.search;
        if (search.indexOf('?') != -1) {
            search = search.substring(1);
            var search_arr = search.split('&');
            var url_arr = [];
            var update_arr = [];

            //del parama
            if (delArr.length > 0) {
                for (var i = 0; i < search_arr.length; i++) {
                    var temp = search_arr[i].split('=');
                    for (var j = 0; j < delArr.length; j++) {
                        if (temp[0] == delArr[j].key) {
                            search_arr.splice(i, 1);
                        }
                    }
                }
            }

            //判断未添加的情况
            for (var j = 0; j < jsonArr.length; j++) {
                var exists = 0;
                for (var i = 0; i < search_arr.length; i++) {
                    if (!search_arr[i])
                        continue;
                    var temp = search_arr[i].split('=');
                    if (jsonArr[j].key == temp[0]) {
                        exists = 1;
                    }
                }
                if (!exists) {
                    url_arr.push(jsonArr[j].key + '=' + jsonArr[j].val);
                } else {
                    update_arr.push({'key': jsonArr[j].key, 'val': jsonArr[j].val});
                }
            }

            for (var i = 0; i < search_arr.length; i++) {
                if (!search_arr[i])
                    continue;
                var temp = search_arr[i].split('=');
                var update = 0;
                for (var j = 0; j < update_arr.length; j++) {
                    if (update_arr[j].key == temp[0]) {
                        update = 1;
                        url_arr.push(update_arr[j].key + '=' + update_arr[j].val);
                    }
                }
                if (!update) {
                    if (temp[0] != 'page' && temp[0] != 'token') {
                        url_arr.push(search_arr[i]);
                    }
                }
            }
        } else {
            var url_arr = [];
            for (var j = 0; j < jsonArr.length; j++) {
                url_arr.push(jsonArr[j].key + '=' + jsonArr[j].val);
            }
        }

        url = window.location.pathname + '?' + url_arr.join('&');
        window.location.href = url;
    },
	
    //del url 参数
    delParama: function(key) {
        var search = window.location.search;
        if (search.indexOf(key) != -1) {
            search = search.substring(1);
            var search_arr = search.split('&');
            var url_arr = [];
            for (var i = 0; i < search_arr.length; i++) {
                var temp = search_arr[i].split('=');
                if (key != temp[0]) {
                    url_arr.push(search_arr[i]);
                }
            }
            url = window.location.pathname + '?' + url_arr.join('&');
        }
        window.location.href = url;
    }
};

非常好用。