url操作一网打尽（一）

1：url实际应用简介

近期研究发现通过url传递参数很普遍的（淘宝也是这样做的），

通过修改url来传递参数，比如通过关键字搜索某件商品的时候，链接便追加了相应参数。在请求接口的时候直接对url进行解析就行了。我在实际应用中请求结构中page参数结构层级经常发生变化

例如淘宝男装页面是：https://www.taobao.com/markets/nanzhuang/index2016?spm=a219r.lm895.0.0.ADf1F1

当在搜索框中输入英伦时候则变成了以下链接

https://s.taobao.com/list?spm=a217m.8005144.302279.27.1OmJGz&q=%E8%8B%B1%E4%BC%A6&cat=50344007&style=grid&seller_type=taobao 

页面是根据链接来呈现的。通过对&q=%E8%8B%B1%E4%BC%A6&cat=50344007&style=grid&seller_type=taobao这几个参数进行解析，

构造出接口需要的数据，提交给接口。然后根据接口返回数据在页面展现出来。 

这样的好处是，如果其他模块也用到参数的话，也可以来解析url中的参数  比如：页码，按照销量筛选，按照地址筛选。

 

2 url结构

在控制台输入location则出现下面结构：

hash　　　　 ""
host          　"s.taobao.com"
hostname    "s.taobao.com"
href 　　　　"https://s.taobao.com/list?spm=a217m.8005144.302279.27.1OmJGz&q=%E8%8B%B1%E4%BC%A6&cat=50344007&style=grid&seller_type=taobao"
origin　　　　"https://s.taobao.com"
pathname　　"/list"
port　　　　　　""
protocol　　　　"https:"
search　　　　"?spm=a217m.8005144.302279.27.1OmJGz&q=%E8%8B%B1%E4%BC%A6&cat=50344007&style=grid&seller_type=taobao"

可以在控制台进行一一验证：如 window.location.origin  

hash  　　　　设置或获取 href 属性中在井号“#”后面的分段。 
host 　　　　　设置或获取 location 或 URL 的 hostname 和 port 号码。 
hostname   　设置或获取 location 或 URL 的主机名称部分。 
href 　　　　　设置或获取整个 URL 为字符串。 
pathname 　　设置或获取对象指定的文件名或路径。 
port 　　　　　设置或获取与 URL 关联的端口号码。 
protocol 　　　设置或获取 URL 的协议部分。 
search 　　　设置或获取 href 属性中跟在问号后面的部分。 

 

3：url操作

3-1 获取当前url完整地址

window.location

location

其他获取方法如下（此处内容参考http://www.jb51.net/article/47288.htm）

document.URL;
document.location; 

top.location.href;

parent.document.location;

3-2  只获取hash 等属性则只需要在3-1后面加上相应属性

 比如： window.location.origin

3-3 url转换成对象（预留）

   /**
         * 分解URL中的参数到JS对象。<br/>
         * 将JS对象组装为参数字符串方法参见{@link #queryString}<br/>
         * 获得表单内所有元素提交参数字符串表示方法参见{@link #formQuery}
         * @param {String} url
         * @return {Object} 永远不会为空
         */
        dequery: function (url) {
            var param = {};
            url = url.substr(url.indexOf('?') + 1);
            if (url) {
                url = url.split('&');
                for (var i = 0, len = url.length; i < len; i++) {
                    var arr = url[i].split('=');
                    param[arr[0]] = decodeURIComponent(arr[1]);
                }
            }
            return param;
        },

3-4 对象转换成url 

 /**
         * 返回对象查询字符串表示形式.
         * <pre><code>
         var obj = {name:'Exiu', age:'25'};

         //显示 name=Exiu&age=25
         alert(queryString(obj));
         // 也可以双重键值对形式
         {"doAction":"interView","extra_params":{"interview_id":"27"}}
         => 'doAction=interView&extra_params['interview_id']=27'
         * </code></pre>
         * 提取url参数转为JS对象方法参见{@link #dequery}<br/>
         * 获得表单内所有元素提交参数字符串表示方法参见{@link #formQuery}
         * @param {Object} obj
         * @return {String} 对象的查询字符串表示形式
         */
        queryString: function (obj) {
            if (!obj)
                return '';
            var arr = [];
            for (var k in obj) {
                var ov = obj[k], k = encodeURIComponent(k);
                var type = typeof ov;
                if (type === 'undefined') {
                    arr.push(k, "=&");
                } else if (type != "function" && type != "object") {
                    arr.push(k, "=", encodeURIComponent(ov), "&");
                } else if (ov instanceof Array) {
                    if (ov.length) {
                        for (var i = 0, len = ov.length; i < len; i++) {
                            arr.push(k, "=", encodeURIComponent(ov[i] === undefined ? '' : ov[i]), "&");
                        }
                    } else {
                        arr.push(k, "=&");
                    }
                } else if (type === 'object') {
                    // 例如"extra_params":{"interview_id":"27"}形式
                    for (var kk in ov) {
                        arr.push(k, '[', kk, ']', '=', encodeURIComponent(ov[kk]), '&');
                    }
                }
            }
            arr.pop();
            return arr.join("");
        }

 

 

 

3-4 url修改单个参数

3-5 url修改多个参数

我现在做的功能展示中需要  对分页，关键字，地区，商品分类，店铺类别，时间顺序，好评顺序 这个几个因素

根据实际场景构造数据请求借口

  //根据传入参数更改链接，如果链接中有page,应去掉page参数，
        goUrl: function (name,value) {
            var urlObj = Util.dequery(location.href);

                if(urlObj.page){
                    delete urlObj.page;
                }
                urlObj[name]=value;
            var urlStr =Util.queryString(urlObj);
            location.href = '?' + urlStr;
        }