原生JS 和 jQuery 通过url传递 和 接收 自定义参数

一、传递参数页面

参数传递方法1：通过a标签传递

<a href="page/info.html?gid=1024&red=#5u6c86&img='./img/goods1.jpg'"></a>

参数传递方法2：通过js方式传递

<script>

// 说明：参数传递说明

    let 参数变量1 = './img/goods1.jpg';
    let 参数变量2 = 998;

    window.location.href = "./page/info.html?rmb=" + 参数变量1 + "&img=" + 参数变量2 + "&name=参数3(字符串)";


// 实例：打开info页面 并传递相应的参数

    let id = 1024;
    let img = './img/goods1.jpg';
    let name = '8K-100寸超清电视';

    
    window.location.href = `./page/info.html?gid=${g_1008}&red=${998}&img=${img}`;

</script>

 
二、接收参数页面
 

URL参数获取方法1：JS原生方法获取url参数

// 假设：打开的网址为：http://www.xxx.com/index.html?name=沐枫&age=28&sex=男

     function getUrlParam(key) {

        // 获取地址栏上"?"问号及后面的参数
        let search = window.location.search.substring(1);
        console.log('search：', search);

        // 将url参数转为url对象
        let urlsp = new URLSearchParams(search);
        console.log('URLSearchParams', urlsp);

        // 根所传入的key返回对应的参数值
        return urlsp.get(key);
     };


    // 现在新的URL参数获取写法
    function getUrlParam(key) {

      const search = window.location.search.substring(1);
          try {
            return new URLSearchParams(search).get(key|| '');
        } catch (err) {
            const reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
            const par = search.match(reg);
            if (par != null) return decodeURI(par[2]); return null;
        }
    };
            


// 注：调用上的getUrlParam('参数')方法 来获取传过来对应的参数 name、age、sex

      console.log(getUrlParam('name'));   //沐枫
      console.log(getUrlParam('age'));    //28
      console.log(getUrlParam('sex'));    //男

URL参数获取方法2：扩展jQuery方法获取url参数

<script src="jQuery.js" type="text/javascript"> //注：要引用jQuery.js文件哦！

<script>  

    // 借助jQuery封装方法
    $.getUrlParam = function (name) {  
        const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的    正则表达式对象
        const par = location.search.substring(1).match(reg);      // 匹配目标参数 
        if (par != null) return decodeURI(par[2]); return null;   // 返回参数值  
    };


    // 现在新的URL参数获取写法
    $.getUrlParam = function(name) {
      const search = window.location.search.substring(1);
          try {
            return new URLSearchParams(search).get(name || '');
        } catch (err) {
            const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            const par = search.match(reg);
            if (par != null) return decodeURI(par[2]); return null;
        }
    };


    // 注：调用上的$.getUrlParam('参数')方法 来获取传过来对应的参数 rmb、img、name

    $('#RMB').html('销售价：' +  $.getUrlParam('rmb') + '.00元');//得到参数变量1的参数： 998

    $('#IMG').attr({src :  $.getUrlParam('img')}); //得到参数变量2的参数：  ../image/goods1.jpg
 
    $('#NAME').text($.getUrlParam('name')); //得到参数3的参数： 参数3(字符串)

</script>

三、URL相关扩展

什么是URL：

即:统一资源定位符 (Uniform Resource Locator, URL) 

完整的URL由这几个部分构成：

这里以：https://www.mupiao.com:3000/index.html?par=456&num=666#format 为例
对应的：scheme://host:port/path?query#fragment  说明

scheme请求协议：

一般网络请求协议有：http、https、ftp、file等。

host:主机
服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。

port:端口号
整数，可选，省略时使用方案的默认端口，如http的默认端口为80。

path:路径
由零或多个"/"符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。

query:查询
可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页）传递参数，可有多个参数，用"&"符号隔开，每个参数的名和值用"="符号隔开。

fragment:信息片断
字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。(也称为锚点.)

四、location的相关属性

1、window.location.href(设置或获取整个 URL 为字符串)

var test = window.location.href;
alert(test);
返回：http://i.cnblogs.com/EditPosts.aspx?opt=1

2、window.location.protocol(设置或获取 URL 的协议部分)

var test = window.location.protocol;
alert(test);
返回：http:

3、window.location.host(设置或获取 URL 的主机部分)

var test = window.location.host;
alert(test);
返回：i.cnblogs.com

4、window.location.port(设置或获取与 URL 关联的端口号码)

var test = window.location.port;
alert(test);
返回：空字符(如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符)

5、window.location.pathname(设置或获取与 URL 的路径部分（就是文件地址）)
var test = window.location.pathname;
alert(test);
返回：/EditPosts.aspx

6、window.location.search(设置或获取 href 属性中跟在问号后面的部分)

var test = window.location.search;
alert(test);
返回：?opt=1

PS：获得查询（参数）部分，除了给动态语言赋值以外，我们同样可以给静态页面，并使用javascript来获得相信应的参数值。

7、window.location.hash(设置或获取 href 属性中在井号“#”后面的分段)

var test = window.location.hash;
alert(test);
返回：空字符(因为url中没有)