Js+Jq获取URL参数的集中方法示例代码

获取 URL 参数是前端开发中经常用到的操作,下面是使用 JavaScript 和 jQuery 获取 URL 参数的示例代码及详细说明。

JavaScript 获取 URL 参数

1. 使用 split 方法和正则表达式分隔字符串

JavaScript 中可以使用 split 方法和正则表达式来截断字符串,然后将获取到的参数与对应的值存储在一个对象中。示例代码如下:

function getParams(str) {
  let params = {};
  let searchParams = str.split('?')[1];
  if (!searchParams) return params;
  searchParams.split('&').forEach(param => {
    let [key, value] = param.split('=');
    params[key] = value;
  });
  return params;
}

let urlParams = getParams(window.location.search);
console.log(urlParams); //输出URL参数和值的对象

2. 使用 URLSearchParams API

JavaScript 提供了一个名为 URLSearchParams 的 API,可以直接获取并解析 URL 搜索参数。示例代码如下:

let searchParams = new URLSearchParams(window.location.search);
let urlParams = Object.fromEntries(searchParams.entries());
console.log(urlParams); //输出URL参数和值的对象

jQuery 获取 URL 参数

在 jQuery 中可以使用 $.param() 方法将URL字符串转换为对象,然后通过遍历获取到的对象,将参数和对应的值存储在一个新的对象中。示例代码如下:

function getParams(url) {
  let params = {};
  let searchParams = decodeURIComponent(url).split('?')[1];
  if (!searchParams) return params;
  $.each($.param.querystring(searchParams), function(key, value) {
    params[key] = value;
  });
  return params;
}

let urlParams = getParams(window.location.search);
console.log(urlParams); //输出URL参数和值的对象

另外,如果你想直接获取当前页面 URL 的参数,可以使用 $.query.get() 方法。示例代码如下:

let urlParams = $.query.get();
console.log(urlParams); //输出URL参数和值的对象

以上是 JavaScript 和 jQuery 获取 URL 参数的示例代码和方法,可以根据实际需求选择使用。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Js+Jq获取URL参数的集中方法示例代码 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JQuery将字符串转为json对象的四种方法

    下面是详细的讲解: 背景 在开发过程中,我们经常需要将字符串转换成 JSON 对象,然后进行操作。而 JQuery 提供了四种方法来完成这项任务。下面我们逐一来了解这四种方法。 方法一:$.parseJSON() 这是最常用的方法,直接调用这个方法即可将字符串转换为 JSON 对象。 var str = ‘{"name": "张…

    JavaScript 2023年5月27日
    00
  • 微信小程序开发探究

    微信小程序开发探究 微信小程序是一种全新的开发模式,可以实现在微信中快速开发小型应用。本文旨在为开发者提供一份完整的微信小程序开发攻略,涵盖从创建应用、开发基本组件到调用API等方面的内容。 创建应用 要创建一个微信小程序,需要进行以下步骤: 下载并安装微信开发者工具; 在工具中,选择“新建小程序”; 填写小程序的基本信息,并选择开发模式; 进入开发者工具的…

    JavaScript 2023年6月11日
    00
  • 动态JavaScript所造成一些你不知道的危害

    当涉及到使用JavaScript编写具有动态性的应用程序时,可能会有一些与安全相关的问题,因为动态JavaScript代码可能会被攻击者利用以进行欺诈、窃听或入侵。以下是一些动态JavaScript会带来的危害和如何防止它们的方法: XSS 攻击 跨站点脚本攻击(XSS)是一种攻击,攻击者利用动态JavaScript来执行恶意代码并跨越不同的域。这可以导致攻…

    JavaScript 2023年5月18日
    00
  • JavaScript基于setTimeout实现计数的方法

    下面是JavaScript基于setTimeout实现计数的方法的攻略: 1. 使用setTimeout实现计数的基本思路 使用setTimeout函数可以在指定的时间之后执行一个函数。基于这个特性,我们可以通过函数的递归调用以及不断增加定时器的延迟时间来实现计数的功能。我们可以定义一个计数函数,每次调用时增加计数器的值,然后再通过setTimeout函数递…

    JavaScript 2023年6月10日
    00
  • 详解js location.href和window.open的几种用法和区别

    下面是“详解js location.href和window.open的几种用法和区别”的完整攻略。 一、前言 在前端开发中,有时候我们需要通过JS来控制浏览器的跳转或打开新窗口等操作,而其中常用的方法就是location.href和window.open。这两个方法虽然都是用来进行页面跳转或打开新窗口,但它们之间还是存在一些区别的。本文将详细讲解JS中loc…

    JavaScript 2023年6月11日
    00
  • javascript中函数作为参数调用的方法

    作为网站作者,我们需要详细讲解“JavaScript中函数作为参数调用的方法”的完整攻略。 什么是函数作为参数调用的方法? 在JavaScript中,函数可以作为参数传递给其他函数,在后者中被调用。这种函数作为参数调用的方法称为“函数回调”或“高阶函数”。 像其他数据类型一样,函数可以存储在变量中,并且可以作为参数传递给函数或从函数返回。通过这种方式,我们可…

    JavaScript 2023年5月28日
    00
  • 从面试题学习Javascript 面向对象(创建对象)

    很高兴能够为你详细讲解“从面试题学习Javascript 面向对象(创建对象)”的完整攻略。下面我将为你提供详细的自学指导及相关示例。 学习Javascript面向对象的创建对象 了解Javascript中对象的创建方式 在Javascript中,有多种创建对象的方式,包括: 对象字面量语法 构造函数 Object.create方法 工厂函数等 在学习创建对…

    JavaScript 2023年5月27日
    00
  • 基于javascript的拖拽类封装详解

    基于javascript的拖拽类封装详解 拖拽是Web开发中比较常见的一种交互方式,它可以让用户直接拖拽页面上的元素完成一些操作,如实现拖拽排序、拖拽上传等功能。本文将详细讲解如何使用JavaScript来封装一个拖拽类,以实现可复用的拖拽功能。 实现思路 我们需要实现一个拖拽类,它具备以下功能: 鼠标按下时,记录鼠标相对元素左上角的偏移量; 鼠标移动时,根…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部