JS获取地址栏参数转换为对象

最新推荐文章于 2024-06-26 13:58:06 发布

原创最新推荐文章于 2024-06-26 13:58:06 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

开发日记专栏收录该内容

48 篇文章

订阅专栏

        let params={}
        let href=location.href;
        href=href.substring(href.indexOf('?')+1);
        let arr=href.split("&");
        arr.forEach(item=>{
            let a=item.split("=");
            params[a[0]]=a[1]
        })

地址栏信息：http://localhost:8081/?id=123&type=abc
打印params信息如下：
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

二饭

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

JS获取地址栏参数的两种方法(简单实用)

11-27

**方法一：采用正则表达式获取地址栏参数** 这种方法通过创建正则表达式来匹配并解析URL中的参数。以下是一个简单的函数`GetQueryString`，它接受一个参数名称，然后返回对应的值： ```javascript function Get...

使用js获取地址栏参数的方法推荐(超级简单)

10-22

获取地址栏参数是Web开发中常用的功能，主要是用来从浏览器的地址栏（URL）中读取参数值。当用户访问一个带有查询字符串（Query String）的URL时，开发者常常需要从这些参数中获取数据以完成某些业务逻辑。在...

参与评论您还未登录，请先登录后发表或查看评论

JavaScript获取链接url参数并生成对象

08-09

js地址栏参数获取，并生成对象

地址栏内参数转成对象形式,(?1=a&2=b&3=c转成{1:a,2:b,3:c}

xu_duo_i的博客

11-14

349

地址栏内参数转成对象形式,(?1=a&2=b&3=c转成{1:a,2:b,3:c}

把地址栏的参数转换为对象

weixin_30299539的博客

06-14

682

let paramsArray = window.location.search.substr(1).split('&'), i, paramsObj = {}; paramsArray.forEach((item) => { i = item.indexOf('='); params...

地址栏搜索参数转为对象

大圣的博客

06-29

509

地址栏，查询参数转对象

JavaScript获取URL中的参数，并转化为对象

qq_54140719的博客

10-19

4799

在使用 splite('&') 将每个参数分开，获得 'key=value'格式的元素的数组。先使用splite('?')[1]将字符串按'?每个元素按 '=' 分割并结构分别获得key，value。

js获取地址栏参数的两种方法

10-19

在JavaScript编程中，有时我们需要获取浏览器地址栏中的参数，这些参数通常是以问号（?）开始，由等号（=）分隔的一系列键值对。本文将详细介绍两种方法来实现这一功能。方法一：使用正则表达式 ```javascript ...

js获取地址栏中传递的参数(两种方法)

10-20

在JavaScript中，获取地址栏中传递的参数是常见的需求，特别是在构建动态网页和Web应用程序时。地址栏中的参数通常用于传递数据到服务器或在页面之间传递状态信息。本文将介绍两种方法来获取这些参数。 ### 第一种...

处理url路径，将地址栏参数转化成对象

a88480的博客

08-27

788

处理url路径，将地址栏参数转化成对象获取url地址中？后面的参数，并将参数对象化，，模仿node中url.parse().query 方法例如www.baidu.com?name=张三&key=haha&age=1 处理后obj={name:张三,key:哈哈,age:1} 封装成函数 var url = "www.baidu.com?name=张三&key=haha&age=1 "; function handleUrl(url) { var ob

js获取地址栏参数，分离并保存为对象

scorpio的世界

06-12

1611

1、已封装好的获取地址栏参数的方法 getParamsFromURL(url) { if ('undefined' == url) { return {}; } let paraString = url.substring(url.indexOf("?") + 1, url.length).split("&"); let paraObj = ...

获取地址栏?后的参数并把其转行成对象格式

想好了再写！

05-10

262

js地址传过来的参数解析成对象

zhangli0421的博客

12-17

212

// 做一个简单的封装，哈哈我就把获取过来的数据当字符串处理了 function udata(str) { // 注意要是有汉字做个简单的解码decodeURI(str) str = decodeURI(str); // 1.处理掉? var dataStr = str.split("?")[1]; // 2.进行一个截取转化成数组 dataStr = dataStr.split("&"); // 3.定义一个新对象存放数据 var...

获取地址栏的参数并转译成中文

Dendrobium_qian的博客

06-26

371

但是你复制下来或者js获取是字符串，如： https://xxx.org.cn:9999/kejiao/index?console.log(decodeURIComponent(window.location.search.split('=')[1])) //高血压。例如当前网页地址为https://xxx.org.cn:9999/kejiao/index?

获取地址栏参数并转码

活捉一只小可爱

10-16

477

获取地址栏参数并转码 /** * 获取地址栏参数并转码 * @param name * @returns {*} */ function getUrlParam(name) { //构造一个含有目标参数的正则表达式对象 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //匹配目标参数 var r = window.location.search.substr(1).match(re

js获取地址栏参数

m0_52685922的博客

04-28

340

如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符。除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值。本例返回值:192.168.11.101:8082。整个URl字符串(在浏览器中就是完整的地址栏)URL 的路径部分(就是文件地址)本例返回值:8082。

vue 跳转页面带对象_vue跳转页面的几种方法(推荐)

weixin_39665507的博客

12-19

745

vue跳转不同页面的多种方法1：router-link跳转点击跳转2点击跳转1点击跳转32：this.$router.push()点击跳转4export default{name:'test',methods:{goTo(){//直接跳转this.$router.push('/testDemo');//带参数跳转this.$router.push({path:'/testDemo',query:{...

JavaScript——location对象

shhghvvh的博客

11-29

1888

window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。

js对象转地址栏参数

最新发布

09-02

<think> 我们被要求回答的问题：JavaScript对象转地址栏参数的实现方法。根据引用内容，我们可以找到几种方法。特别地，引用[5]提供了JS对象转url参数的具体实现函数，而引用[4]和引用[3]则提到了URL参数与对象的转换（但问题要求的是对象转参数，所以引用[5]更直接相关）。我们将重点参考引用[5]中的方法，并可以结合其他引用中的信息进行补充。引用[5]中的函数`objectToQuery`实现了将对象转换为URL参数字符串的功能，并且支持嵌套对象。但是，我们需要注意的是，该函数在转换嵌套对象时使用了方括号（例如`d[e]=5`），这种格式在PHP等服务器端语言中可以正确解析为嵌套数组，但并非所有服务器端框架都支持，而且标准URL参数通常是平面的（即不支持嵌套）。因此，在实际应用中，我们可能需要根据后端的要求来决定是否支持嵌套。另外，引用[1]、[2]中提到了如何从URL中获取参数，但这不是当前问题所关心的。当前问题：把JavaScript对象转换为地址栏参数。我们将提供几种实现方法： 1. 简单方法：适用于平面对象（没有嵌套），如引用[4]中的方法逆向思路。 2. 支持嵌套的方法：如引用[5]中的方法。但需要注意的是，标准URL参数通常是键值对，且值只能是字符串，所以如果对象中有非基本类型（如数组、嵌套对象），我们需要考虑如何序列化。常见的做法： - 对于数组：可以序列化为`key[]=value1&key[]=value2`或`key=value1,value2`等，具体取决于后端要求。 - 对于嵌套对象：可以转化为带方括号的键（如`obj[key]=value`）或者使用JSON字符串（但需要后端配合解析）。考虑到通用性，我们通常使用平面化的方式，即把嵌套对象打平成带层级关系的键。下面我们提供几种实现方式： </think> 在JavaScript中，将对象转换为地址栏参数是实现URL参数传递的常见需求。以下是几种常用方法，包含代码示例和说明： --- ### 一、基础平面对象转换（推荐🌱）适用于单层键值对对象（无嵌套结构）： ```javascript function objToParams(obj) { return '?' + Object.keys(obj) .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`) .join('&'); } // 示例 const data = { name: "小明", age: 25, city: "北京" }; console.log(objToParams(data)); // 输出：?name=%E5%B0%8F%E6%98%8E&age=25&city=%E5%8C%97%E4%BA%AC ``` - **特点**：使用`encodeURIComponent`处理特殊字符（如空格、中文）[^5] - **注意**：嵌套对象会被转为`[object Object]`，需额外处理 --- ### 二、嵌套对象转换（支持多级结构）通过递归处理嵌套对象（如`{ user: { name: "John" } }`）： ```javascript function deepObjToParams(obj, prefix = '') { return Object.keys(obj).map(key => { const fullKey = prefix ? `${prefix}[${key}]` : key; const value = obj[key]; return (value && typeof value === 'object') ? deepObjToParams(value, fullKey) // 递归嵌套 : `${encodeURIComponent(fullKey)}=${encodeURIComponent(value)}`; }).join('&'); } // 示例 const data = { user: { name: "John", id: 123 }, tags: ["js", "web"] }; console.log('?' + deepObjToParams(data)); // 输出：?user[name]=John&user[id]=123&tags[0]=js&tags[1]=web ``` --- ### 三、数组参数处理专门处理数组类型值（生成`key=val1&key=val2`格式）： ```javascript function handleArrayParams(obj) { const params = new URLSearchParams(); Object.entries(obj).forEach(([key, val]) => { Array.isArray(val) ? val.forEach(v => params.append(key, v)) : params.append(key, val); }); return '?' + params.toString(); } // 示例 const data = { colors: ["red", "blue"], size: "M" }; console.log(handleArrayParams(data)); // 输出：?colors=red&colors=blue&size=M ``` --- ### 关键注意事项 1. **编码规范**：必须使用`encodeURIComponent`转义特殊字符（如`&`、`#`）[^1][^4] 2. **数组处理**：根据后端要求选择格式： - `key[]=value`（PHP风格） - `key=value1,value2`（逗号分隔） - 多键重复`key=value1&key=value2` 3. **空值处理**：建议过滤`null/undefined`值避免无效参数 4. **框架集成**： - Vue：使用`vue-router`的`router.push({ query: obj })` - React：`new URLSearchParams(obj).toString()` > 对嵌套对象序列化时，需与后端约定解析规则（如方括号`[ ]`表示层级）[^2][^5] --- ### 相关问题 1. 如何将URL参数反向解析为JavaScript对象？ 2. 处理特殊字符（如`@`、`/`）在URL参数传递时需要注意什么？ 3. 不同框架（Vue/React/Angular）中管理URL参数的最佳实践是什么？ 4. 如何实现前端路由的持久化参数存储？ [^1]: 引用[1] [^2]: 引用[2] [^4]: 引用[4] [^5]: 引用[5]