前端url拼接参数格式&?用&和? =拼接方法实例

 更新时间:2023年02月07日 10:10:17   作者:桃花郎  
在一些情况下需要直接往url上拼接请求参数,下面这篇文章主要给大家介绍了关于前端url拼接参数格式&?用&和? =拼接的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

首先在一些情况下,往url上拼接请求参数

     【?】开头     

     【&】开头  

     【=】参数值

1.如何直接往url上拼接请求参数

通过下面的例子可以看出,第一个参数需要以【?】开头, 然后是参数名,然后是【=】,然后是参数值。

第一个参数:需要以【?】开头,然后是参数名。

http://www.taohua.com?age=1

下面是第二个参数的拼接开始则需要以【&】开头,然后是参数名,然后是【=】,然后是参数值。

第二个参数  : 开始需要以【?】开头,然后是参数名,第二个以【&】开头,然后是参数名。

http://www.桃花.com?box=arr&anme='桃花'&age=18

这就是url拼接参数的格式要求。

另一种理解就是,当需要往url上拼接请求参数的时候,需要以【?】作为分隔符,在【?】分隔符的右边开始拼接参数对,参数对的格式是【参数名=参数值】,不同参数对之间以【&】作为分隔符。

2.js 地址栏url 传一个参数和多个参数时拼接方法:

//动态设置当参数传进去

let ipaddr = "192.162.1.1.....";
let path = "/arrg/box";
let url   = "http://" + ipaddr +path ;
console.log(url);// http://192.168.1.1..../arrg/box"

//?拼接一个参数

let ipaddr = "192.162.1.1.....";
let path = "/arrg/box";
let url   = "http://" + ipaddr +path ;
let getTimestamps = new Date().getTime();//时间戳
let url= "http://" + ipaddr + path + "?timestamps=" + getTimestamps;
console.log(url);//http://192.168.1.1..../arrg/box?timestamps=16082771588

//两个参数拼接时用 & 连接

let ipaddr = "192.162.1.1.....";
let path = "/arrg/box";
let url= "http://" + ipaddr + path + "?timestamps=" + getTimestamps;
let value = 0;
let url2 = "http://" + ipaddr + path + "?value=" + v + "&timestamps=" + getTimestamps;
console.log(url2);// http://192.168.1.1..../arrg/box?value=0&timestamps=16082771588

补充知识:url获取?后面所有拼接的参数

在页面传值的时候,经常使用到方法就是url后面通过?拼接参数,再结合&可以实现多个参数的传递,例如

http://www.test.com?a=123&b=xyz&b=456

传参不难,只需要按照格式拼接起来,难点在于如何获取拼接好的参数,以上面为例,也就是获取?a=123&b=xyz&c=456这部分内容

使用window.location.search!对,原生的这个api可以获取到?以及后面的参数值,但是不友好的地方在于获取的是字符串,给我们这么一坨东西没用啊,我们需要的东西在这字符串之中,所以我们需要处理一下这个字符串,处理成什么格式做好用呢?对象!

因为在js中,万物皆对象~这里就给大家罗列两种方法(当然不止两种,还有很多方式可以处理,找到一两种好理解,好记忆,灵活处理各种问题的方法才是硬道理)

推荐方法

使用replace()和queryString.parse();

replace()方法可以使用其他的代替,目的是去掉字符串中的?

// http://www.test.com?a=123&b=xyz&b=456
//先引入
import queryString from 'querystring';
 
const url=window.location.search;
const data=url.replace('?', '');
const param = queryString.parse(data);
 
//最后结果
param = {
    a:'123',
    b:['xyz','456']
}
 
//合并
const param= queryString.parse(url.replace('?', ''));

总结

到此这篇关于前端url拼接参数格式&?用&和? =拼接的文章就介绍到这了,更多相关url用&和? =拼接内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 实例分析JS与Node.js中的事件循环

    实例分析JS与Node.js中的事件循环

    本篇文章通过实例给大家详细分析了JS与Node.js中的事件的原理以及用法,大家学习一下吧。
    2017-12-12
  • JavaScript实现左右滚动电影画布

    JavaScript实现左右滚动电影画布

    这篇文章主要为大家详细介绍了JavaScript实现左右滚动电影画布,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • js实现购物车计算的方法

    js实现购物车计算的方法

    这篇文章主要为大家详细介绍了js实现购物车的计算方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • js使弹层下面的body禁止滚动

    js使弹层下面的body禁止滚动

    这篇文章介绍了js使弹层下面body禁止滚动的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • JS按钮闪烁功能的实现代码

    JS按钮闪烁功能的实现代码

    js按钮闪烁功能的实现代码分为html和js两部分代码,具体实现代码大家参考下本文
    2017-07-07
  • 终于解决了IE8不支持数组的indexOf方法

    终于解决了IE8不支持数组的indexOf方法

    今天,测试报过来一个js bug, 在IE8下有个js错误,但是在其它浏览器下(Firefox, Chrome, IE9)下面都很正常。后来调试发现原因是在IE8下,js数组没有indexOf方法。
    2013-04-04
  • JS寄快递地址智能解析的实现代码

    JS寄快递地址智能解析的实现代码

    这篇文章主要介绍了JS寄快递地址智能解析,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • Javascript string 扩展库代码

    Javascript string 扩展库代码

    Javascript原生的String处理函数显得很不够丰富
    2010-04-04
  • 实用的Javascript调试技巧整理

    实用的Javascript调试技巧整理

    这篇文章介绍了Javascript的调试技巧,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • js 数组倒序排列的具体实现

    js 数组倒序排列的具体实现

    有时候需要将数组类型变量内的元素颠倒一下顺序再输出,本文就详细的介绍一下,具有一定的参考价值,感兴趣的可以了解一下
    2023-08-08

最新评论