zoukankan      html  css  js  c++  java
  • JS实现URL的拼接转换

           很多时候能在前端用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;
        }
    码农随笔防失忆,只为记录风雨路上的脚丫印印~
  • 相关阅读:
    移动端文本编辑器
    jquery移动端日期插件
    Spring 4集成 Quartz2(转)
    json 特殊字符 javascript 特殊字符处理(转载)
    解决使用JavaScriptConvert转换对象为Json时,中文和&符号被转码的问题
    RFID的winform程序心得2
    异步编程模型
    DataGridView获取或者设置当前单元格的内容
    DataGridView修改数据并传到数据库
    把存储过程结果集SELECT INTO到临时表
  • 原文地址:https://www.cnblogs.com/bella-lin/p/8038940.html
Copyright © 2011-2022 走看看