前端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用&和? =拼接内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript之String常见的方法详解
这篇文章主要为大家介绍了JavaScript之String常见的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11
js实现连个数字相加而不是拼接的方法
这篇文章主要介绍了js如何实现连个数字相加而不是拼接,需要的朋友可以参考下
2014-02-02
JS中showModalDialog关闭子窗口刷新主窗口用法详解
这篇文章主要介绍了JS中showModalDialog关闭子窗口刷新主窗口用法,结合具体实例形式较为详细的分析了showModalDialog常见用法与相关使用技巧,需要的朋友可以参考下
2017-03-03
js实现模态框的拖拽效果
这篇文章主要为大家详细介绍了js实现模态框的拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
js仿360开机效果
这篇文章主要为大家详细介绍了js仿360开机效果，并且封装一个带回调函数的缓动动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
JS实现利用闭包判断Dom元素和滚动条的方向示例
这篇文章主要介绍了JS实现利用闭包判断Dom元素和滚动条的方向,涉及javascript闭包、事件响应及页面元素属性动态操作相关使用技巧,需要的朋友可以参考下
2019-08-08
小程序统计来源信息的方案与具体代码
微信小程序数据统计,现在有很多的统计方法和统计工具,下面这篇文章主要给大家介绍了关于小程序统计来源信息的方案与具体代码,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-09-09
一个效果写的HashTable代码
一个效果写的HashTable代码...
2007-03-03
qq悬浮代码(兼容各个浏览器)
qq悬浮代码(兼容各个浏览器)。需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
深入分析下javascript中的[]()+!
本文是笔者遇到的一个很无奈的题目之后，不得不仔细研究一番，有需要的小伙伴来参考下吧。
2015-07-07