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日

相关文章

  • JavaScript性能优化之小知识总结

    JavaScript性能优化之小知识总结 JavaScript作为一门脚本语言,常常用来进行Web开发,然而JavaScript代码性能比其他语言的代码性能低,经常会造成网页的卡顿、响应速度慢等问题。为了避免这些问题,下面是一些关于JavaScript性能优化的小知识总结。 1. 减少对DOM的访问 频繁的对DOM进行读写操作会大大降低网站的性能,因此尽量避…

    JavaScript 2023年5月19日
    00
  • JavaScript的查询机制LHS和RHS解析

    JavaScript中存在两种类型的查询机制,即左查询(LHS)和右查询(RHS)。这两种查询机制可以帮助我们理解JavaScript变量的赋值过程。下面详细讲解一下这两种查询机制。 LHS查询 LHS查询通常发生在变量被赋值的时候,这种查询的目的是为了找到变量所在的内存地址,当变量所在的内存地址存在时,就可以把该值赋给变量。如果变量所在内存地址在运行时不存…

    JavaScript 2023年5月28日
    00
  • JS中Eval解析JSON字符串的一个小问题

    当 JavaScript 中需要解析 JSON 字符串时,通常使用 JSON.parse() 方法。但是有些时候,我们可能想要使用 eval() 函数来解析 JSON 字符串。在这种情况下,有一个小问题需要注意。 问题是,如果 JSON 字符串中含有 JavaScript 关键字或保留字,eval() 函数可能会抛出一个意外的错误。因此,我们需要特别处理这种…

    JavaScript 2023年5月27日
    00
  • 浅谈ajax在jquery中的请求和servlet中的响应

    AJAX在jQuery中的请求 1.1 基本概念 AJAX是浏览器与服务器之间异步传输数据的一种技术,可以在不刷新整个页面的情况下更新页面的部分内容。jQuery是一个JavaScript库,常用于进行AJAX请求。 1.2 使用方法 使用jQuery发送AJAX请求的基本语法如下: $.ajax({ type: "POST", // G…

    JavaScript 2023年6月11日
    00
  • 16个最流行的JavaScript框架[推荐]

    16个最流行的JavaScript框架[推荐]攻略 介绍 JavaScript框架可以帮助开发者更加高效地创建Web应用程序。在这篇攻略中,我们将介绍16个最流行的JavaScript框架,这些框架功能各异,可以满足不同开发需求。在选择JavaScript框架时,我们建议开发者先考虑项目的需求和特点。以下是我们推荐的16个JavaScript框架: Angu…

    JavaScript 2023年5月18日
    00
  • JS实现太极旋转思路分析

    下面是一份JS实现太极旋转的完整攻略。 1. 思路分析 太极旋转是一种常见的动画效果,其实现基本思路如下: 创建一个太极图形的HTML结构 使用CSS样式将其样式设置完成,达到一个静止的状态 使用JS来控制太极图形的旋转角度 具体实现过程中,其实旋转本质上是一个让元素不断改变其旋转角度的过程,我们可以通过JS创建一个变量来保存旋转角度的数值,每次修改该数值,…

    JavaScript 2023年6月11日
    00
  • JS中利用FileReader实现上传图片前本地预览功能

    下面是详细讲解 JS 中利用 FileReader 实现上传图片前本地预览功能的完整攻略: 什么是 FileReader FileReader 是 HTML5 新增的一个 API,它允许网页异步读取存储在用户计算机上的文件数据,使用该 API 可以实现文件的预览、上传、加密等功能。 使用 FileReader 实现上传图片前本地预览功能的步骤 获取 file…

    JavaScript 2023年5月27日
    00
  • 关于__defineGetter__ 和__defineSetter__的说明

    关于 __defineGetter__ 和 __defineSetter__ 的说明 __defineGetter__ 和 __defineSetter__ 是 JavaScript 中的两个方法,它们可以用于动态定义属性的 getter 和 setter 方法。在 ES5 中已经被废弃,建议使用 Object.defineProperty 来替代它们。 _…

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