首页 web前端 js教程 如何使用JavaScript获取URL参数

如何使用JavaScript获取URL参数

Nov 30, 2018 am 10:37 AM
url参数 获取

如果你希望通过JavaScript获取和使用URL参数。在JavaScript中,可以使用“document.location.search”获取URL的参数。但是,由于你只能在URL路径后立即检索参数的字符串,因此必须分析获取的字符串以获取每个参数的值。

URL参数

我们直接来看示例

代码如下

GetParam.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
      <script type="text/javascript">
        window.onload = function onLoad() {
            param = GetQueryString();
            target = document.getElementById("param");
            target.innerHTML = param["q"];
        }
        function GetQueryString() {
            if (1 < document.location.search.length) {
                var query = document.location.search.substring(1);
                var parameters = query.split(&#39;&&#39;);
                var result = new Object();
                for (var i = 0; i < parameters.length; i++) {
                    var element = parameters[i].split(&#39;=&#39;);
                    var paramName = decodeURIComponent(element[0]);
                    var paramValue = decodeURIComponent(element[1]);
                    result[paramName] = decodeURIComponent(paramValue);
                }
                return result;
            }
            return null;
        }
      </script>
</head>
<body>
<div>这是一个参数</div>
    <div id="param"></div>
</body>
</html>
登录后复制

说明:

URL参数部分的字符串可以通过“document.location.search”属性获得。通过调用substring(1)方法,获取第二个和后续的字符串。(如果URL参数为“?Q = ABCD&m = 30”,则将获取“q = ABCD&m = 30”。)

随后,将获取的字符串通过“&”拆分。如果获得的字符串是“q = ABCD&m = 30”,则q = ABCD被分配给参数[0],m = 30被分配给参数[1]。

此外,参数的各个元素由'='分隔,获取值和参数名称,存储在结果关联数组中并作为返回值返回。

function GetQueryString() {
  if (1 < document.location.search.length) {    
     var query = document.location.search.substring(1);
     var parameters = query.split(&#39;&&#39;);
    var result = new Object();    
  for (var i = 0; i < parameters.length; i++) {      
       var element = parameters[i].split(&#39;=&#39;);
      var paramName = decodeURIComponent(element[0]);      
  var paramValue = decodeURIComponent(element[1]);
       result[paramName] = decodeURIComponent(paramValue);
    }
    return result;
  }
  return null;}
登录后复制

运行结果

执行HTML文件将在浏览器上显示如下效果。

2345截图20181130102900.png

将参数“q”添加到URL的末尾。(?q=testabc被添加到URL的末尾。)

2345截图20181130103059.png

可以获取参数并且在页面上输出所获取的参数“testabc”。

以上是如何使用JavaScript获取URL参数的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何在Python中获取文件扩展名? 如何在Python中获取文件扩展名? Sep 08, 2023 pm 01:53 PM

Python中的文件扩展名是附加在文件名末尾的后缀,用于表示文件的格式或类型。它通常由三个或四个字符组成,文件名后跟一个句点,例如“.txt”或“.py”。操作系统和程序利用文件扩展名来确定文件的类型以及应如何处理它。被识别为纯文本文件。Python中的文件扩展名在读取或写入文件时至关重要,因为它建立了文件格式以及读取和写入数据的最佳方法。例如,“.csv”文件扩展名是读取CSV文件时使用的扩展名,而csv模块则用于处理该文件。Python中获取文件扩展名的算法在Python中操作文件名字符串来

谷歌安全码在哪里获取 谷歌安全码在哪里获取 Mar 30, 2024 am 11:11 AM

谷歌验证器是一种用于保护用户账户安全的工具,其密钥是用于生成动态验证码的重要信息。如果忘记了谷歌验证器的密钥,只能通过安全码进行验证,那么下文本站小编就将为大家带来谷歌安全码在哪里获取的详细内容介绍,希望能帮助到大家,想要了解的用户们就请跟着下文继阅读吧!首先打开手机设置,进入设置页面。下拉页面,找到Google。进入Google页面,点击Google账号。进入账号页面,点击验证码下方的查看。输入密码或者使用指纹验证身份。获得Google安全码,利用安全码验证谷歌身份。

使用math.Max函数获取一组数中的最大值 使用math.Max函数获取一组数中的最大值 Jul 24, 2023 pm 01:24 PM

使用math.Max函数获取一组数中的最大值在数学和编程中,经常需要找出一组数中的最大值。在Go语言中,我们可以使用math包中的Max函数来实现这个功能。本文将介绍如何使用math.Max函数来获取一组数中的最大值,并提供相应的代码示例。首先,我们需要导入math包。在Go语言中,导入包可以使用import关键字,如下所示:import"mat

如何在Java中获取LinkedHashSet的最后一个元素? 如何在Java中获取LinkedHashSet的最后一个元素? Aug 27, 2023 pm 08:45 PM

从Java中的LinkedHashSet中检索最后一个元素意味着检索其集合中的最后一个元素。尽管Java没有内置方法来帮助检索LinkedHashSets中的最后一个项,但存在多种有效的技术,可以提供灵活性和便利性,有效地检索此最后一个元素而不破坏插入顺序-这是Java开发人员必须在其应用程序中有效处理的问题。通过将这些策略有效地应用于他们的软件项目中,他们可以实现满足此要求的最佳解决方案LinkedHashSetLinkedHashSet是Java中的一种高效数据结构,它结合了HashSet和

Java程序获取给定文件的大小(以字节、千字节和兆字节为单位) Java程序获取给定文件的大小(以字节、千字节和兆字节为单位) Sep 06, 2023 am 10:13 AM

文件的大小是特定文件在特定存储设备(例如硬盘驱动器)上占用的存储空间量。文件的大小以字节为单位来衡量。在本节中,我们将讨论如何实现一个java程序来获取给定文件的大小(以字节、千字节和兆字节为单位)。字节是数字信息的最小单位。一个字节等于八位。1千字节(KB)=1,024字节1兆字节(MB)=1,024KB千兆字节(GB)=1,024MB和1太字节(TB)=1,024GB。文件的大小通常取决于文件的类型及其包含的数据量。以文本文档为例,文件的大小可能只有几千字节,而高分辨率图像或视频文件的大小可

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

真我 12 Pro怎么安装双卡? 真我 12 Pro怎么安装双卡? Mar 18, 2024 pm 02:10 PM

虽然说国产手机的大致操作是很相似的,但是在有的细节上面还是会有些区别的,比如说不同的手机型号和制造商可能会有不同的双卡安装方式。二真我12Pro这款新手机也是支持双卡双待的,但是这款手机具体又应该怎么安装双卡呢?真我12Pro怎么安装双卡?在安装之间记得先把手机关机哟。步骤一查找SIM卡托盘:查找手机的SIM卡托盘,通常,在真我12Pro中,SIM卡托盘位于手机的侧边或顶部。步骤二插入第一张SIM卡,使用专用的SIM卡针或一个细小的物体,将其插入SIM卡托盘中的开槽,然后,将第一张SIM卡小心地

即刻获取最新更新:修复缺少最新更新问题 即刻获取最新更新:修复缺少最新更新问题 Nov 08, 2023 pm 02:25 PM

如果“最新更新可用后立即获取最新更新”选项缺失或灰显,则你可能正在运行开发人员频道Windows11版本,这是正常的。对于其他人,安装KB5026446(22621.1778)更新后会出现问题。您可以采取以下措施来取回“在最新更新可用时立即获取更新”选项。如何取回“在最新更新可用时立即获取更新”选项?在开始以下任何解决方案之前,请确保检查最新的Windows11更新并安装它们。1.使用ViVeTool转到“Microsoft更新目录”页面并查找KB5026446更新。在您的PC上下载并重新安装更

See all articles