首页 > Web开发 > 详细

JS实现URL的拼接转换

时间:2017-12-14 18:58:25      阅读:230      评论:0      收藏:0      [点我收藏+]

       很多时候能在前端用js实现的数据交互,要比后台套页面实现起来要简单的多,项目中要实现多重筛选的功能,没有做成接口,那就只能js实现url的拼接转换刷新页面,本质就是改变get传参里参数值,这里先简单介绍下window.location里属性值

属性 描述
href 完整的URL
pathname 当前URL的主机名
host 当前URL的主机名和端口号
port 当前URL的端口号
hash 从#开始的URL(锚)
search 从?开始的URL(查询部分)
protocol 当前URL的协议

      js对url的操作无非就是对这几个属性值的操作,html自定义属性,记录对应的参数和值

<div ">
  <a href="javascript:void(0);" class="remove-sel selected" style="padding-left: 0;" type="sentiment">全部</a>
  <a href="javascript:void(0);" class="add-sel" type="sentiment" value="1">负面</a>
  <a href="javascript:void(0);" class="add-sel" type="sentiment" value="2">中性</a>
  <a href="javascript:void(0);" class="add-sel" type="sentiment" value="3">正面</a>
</div>

增加参数

function addParama(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);
            var url = window.location.pathname + ‘?‘ + url_arr.join(‘&‘);
        } else {
            var url = window.location.pathname + ‘?‘ + key + ‘=‘ + val;
        }
        window.location.href = url;
    }

删除参数

function delParama(key) {
        var search = window.location.search;
        var url = window.location;
        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]);
                }
            }

            if (url_arr.length == 0){
                url = window.location.pathname;
            }else {
                url = window.location.pathname + ‘?‘ + url_arr.join(‘&‘);
            }
        }
        window.location.href = url;
    }

 

JS实现URL的拼接转换

原文:http://www.cnblogs.com/bella-lin/p/8038940.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!