jQuery获取URL中的参数详解
1. 流程概述
下面是获取URL中参数的整个流程概述：
gantt
dateFormat YYYY-MM-DD
title 获取URL参数流程概述
section 准备工作
格式化URL :done, 2022-01-01, 1d
解析参数 :done, 2022-01-02, 1d
section 主要步骤
获取URL :done, 2022-01-03, 1d
解析参数 :done, 2022-01-04, 1d
返回结果 :done, 2022-01-05, 1d
2. 具体步骤
接下来，我将详细解释每个步骤需要做什么，以及对应的代码。
2.1 准备工作
在开始获取URL参数之前，我们需要先进行一些准备工作。这些准备工作包括格式化URL和解析参数。
2.1.1 格式化URL
我们需要先从浏览器中获取当前页面的URL，然后格式化URL，去掉无用的部分，只留下参数部分。
var url = window.location.href; // 获取当前页面的URL
var paramsStartIndex = url.indexOf('?'); // 获取参数部分的起始位置
var formattedUrl = url.substring(paramsStartIndex + 1); // 获取参数部分
代码解释：
- 使用
window.location.href获取当前页面的URL。 - 使用
indexOf('?')找到参数部分的起始位置。 - 使用
substring(paramsStartIndex + 1)截取参数部分。
2.1.2 解析参数
接下来，我们需要将参数字符串解析成一个键值对的形式，方便后续的操作。
var paramsArray = formattedUrl.split('&'); // 将参数字符串按照 '&' 分割成数组
var params = {}; // 用于存储解析后的参数
for (var i = 0; i < paramsArray.length; i++) {
var param = paramsArray[i].split('='); // 将每个参数按照 '=' 分割成数组
var key = param[0]; // 获取参数的键
var value = param[1]; // 获取参数的值
params[key] = value; // 将参数的键值对存储到 params 对象中
}
代码解释：
- 使用
split('&')将参数字符串按照'&'分割成一个数组。 - 创建一个空对象
params用于存储解析后的参数。 - 使用
split('=')将每个参数按照'='分割成一个数组。 - 通过数组索引获取参数的键和值，并将其存储到
params对象中。
2.2 主要步骤
在准备工作完成后，我们就可以开始获取URL中的参数了。
2.2.1 获取URL
在这一步中，我们需要从用户输入的URL中获取参数部分。
var url = prompt('请输入URL：'); // 用户输入URL
var paramsStartIndex = url.indexOf('?'); // 获取参数部分的起始位置
var formattedUrl = url.substring(paramsStartIndex + 1); // 获取参数部分
代码解释：
- 使用
prompt('请输入URL：')弹出一个对话框，让用户输入URL。 - 使用
indexOf('?')找到参数部分的起始位置。 - 使用
substring(paramsStartIndex + 1)截取参数部分。
2.2.2 解析参数
在这一步中，我们需要将获取到的参数字符串解析成一个键值对的形式。
var paramsArray = formattedUrl.split('&'); // 将参数字符串按照 '&' 分割成数组
var params = {}; // 用于存储解析后的参数
for (var i = 0; i < paramsArray.length; i++) {
var param = paramsArray[i].split('='); // 将每个参数按照 '=' 分割成数组
var key = param[0]; // 获取参数的键
var value = param[1]; // 获取参数的值
params[key] = value; // 将参数的键值对存储到 params 对象中
