如何通过地址栏传递参数及获得参数

最新推荐文章于 2024-05-24 13:50:55 发布
最新推荐文章于 2024-05-24 13:50:55 发布
阅读量2.1w 收藏 11
点赞数 2
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangjinhuang/article/details/24440931
版权

在通过地址栏进行参数的传递及取值时，首先应该了解一下URL的组成部分及其每部分的取得方法和作用说明：

 

URL即:统一资源定位符 (Uniform Resource Locator, URL)

完整的URL由这几个部分构成：

scheme://host:port/path?query#fragment

scheme:通信协议

常用的通信协议有：http,ftp,maito等

host:主机

服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。

port:端口号

整数，可选，省略时使用方案的默认端口，如http的默认端口为80。

path:路径

由零或多个"/"符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。

query:查询

可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页）传递参数，可有多个参数，用"&"符号隔开，每个参数的名和值用"="符号隔开。

fragment:信息片断

字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。(也称为锚点.)

对于这样一个URL：http://www.jbxue.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere

可以用javascript获得其中的各个部分。

1，window.location.href

整个URl字符串(在浏览器中就是完整的地址栏)

本例返回值: http://www.jbxue.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere

2，window.location.protocol

URL 的协议部分

本例返回值:http:

3，window.location.host

URL 的主机部分

本例返回值:www.jbxue.com

4，window.location.port

URL 的端口部分

如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符

本例返回值:""

5，window.location.pathname

URL 的路径部分(就是文件地址)

本例返回值:/fisker/post/0703/window.location.html

6，window.location.search

查询(参数)部分

除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值

本例返回值:?ver=1.0&id=6

7，window.location.hash

锚点

本例返回值:#imhere 那么就可以用这个方法取到指定参数。

 

以下则通过一个实例来进行对通过地址栏传递参数及取值的了解。

 

如果要通过URL进行传值.则需要把要传递的信息接在URL上，如：

post.html

<html>

   <head>

<meta charset="GBK"/>

<title></title>

<script>

     function post(){

                var url = "read.html?name="+escape(document.all.name.value);

url +="&password="+escape(document.all.password.value); 

window.location = url ;

     };

</script>

   </head>

   <body>

     姓名:<input type="text" name="name"/><br/>

     密码:<input type="text" name="password"/><br/>

     <input type="button" value="post" onClick="post()"/>

   </body>

</html>

 

在把参数接在URL后，这时就需要对地址栏里的参数进行取值并且将其输出，具体实现方法如下：

read.html

<html>

   <head>

<title></title>

<script>

  window.onload = function(){

   var url = window.location.search;

   var request = new Object();

      if(url.indexOf("?")!=-1){  <!--判断是否存在，如果返回-1，则表明不存在-->

      var str = url.substr(1);   <!--从第1个字符开始截取-->

      var strs = str.split("&");·<!--表示以“&’”为分隔符进行分隔，返回的是一个数组-->

      for(var i=0;i<strs.length;i++){

request[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);

      }

   }

   alert("name="+request["name"]);

   alert("password="+request["password"]);

};

</script>

 

   </head>

   <body><body>

</html>

 

zhangjinhuang
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
通过地址栏地址（URL）传递参数
yuan113的博客
11-07 5431
通过地址栏地址（URL）传递参数 编写URLServlet.java 接收参数（地址栏提供的） 显示参数 配置web.xml文件 输入地址+参数 格式：访问Servlet的地址?参数1=参数值1&参数2=参数值2 例如：http://localhost:8080/ch02/URLServlet?name=zs&no=123 其中，name和no是参数，zs和123是参数值 编写URLServlet.java package one; import java.io.IOException;
js处理地址栏传递参数
03-23
js处理地址栏传递参数,有时候遇见中文编码很麻烦,这个写了个统用的方法
【前端】url传参几种形式
最新发布
2301_79657404的博客
05-24 563
data=123&data2=456&data3=789" //固定值 url="https://www.baidu.com?data1=" + ‘变量1’ + ‘&data2=’ + '变量2' + ‘&data3=’ + '变量3' url:`/pages/chuancan/uncle?price=${this.price}&name=${this.sonName}` //模板字符串。
地址栏传参
anjiao1697的博客
01-09 369
// 地址栏传参 function getLocation() { // 获取地址栏参数 var str = location.search; // var str = "?name='zs'&age=18&sex='man'"; // 解码 str = decodeURI(str); // 切割去除？[slice切割字符串] str = s...
前端传参的三种方式
发渐稀的博客
05-20 704
对于这个接口而言，query是接口被调用时接收参数的形参，params即是传参方式，而query就是参数，其会自动拼接在请求地址的 url 后面，以问号分隔；这样我们可以直接在地址栏中看到请求的参数。但是在控制台中可以打印出来（这里不仅可以暂时data中的请求参数，也可以展示params中的请求参数）params的参数会拼接在地址栏中，而data中的数据会拼接在请求体中，可以在控制台看到二者。使用 data 传参，其会把数据拼接在请求体里 (body参数)在本接口中 query 中就是查询参数。
通过地址栏传递参数及获得参数
luck_lin
03-17 1140
在通过地址栏进行参数的传递及取值时，首先应该了解一下URL的组成部分及其每部分的取得方法和作用说明：   URL即:统一资源定位符 (Uniform Resource Locator, URL) 完整的URL由这几个部分构成： scheme://host:port/path?query#fragment scheme:通信协议 常用的通信协议有：http,ftp
html通过地址栏传递,js获取地址栏中传递的参数(两种方法)
weixin_31368913的博客
06-22 612
第一种：字符串拆分法window.location.href 或者 location.href 或者 window.location 获得地址栏中的所有内容decodeURI()可以解码地址栏中的数据 恢复中文数据window.search 获得地址栏中问号及问号之后的数据获取地址栏里(URL)传递的参数function GetRequest(value) {//url例子：www.bicycle...
php地址栏参数,php 全面获取url地址栏参数多种方法
weixin_39997311的博客
03-11 1221
//获取域名或主机地址echo $_SERVER['HTTP_HOST']."";//获取网页地址echo $_SERVER['PHP_SELF']."";//获取网址参数echo $_SERVER["QUERY_STRING"]."";//来源网页的详细地址echo $_SERVER['HTTP_REFERER']."";?> 方法二用？号表达式，echo 'http://'.$_SERV...
获取URL地址栏传递的参数值
wx13699645464的博客
05-10 475
【代码】获取URL地址栏传递的参数值。
一个向地址栏传递参数以及获取数据的简单案例
qq_52164627的博客
11-29 3065
一个模拟前后台提交的小练习 通过在第一个页面的表单里填写信息并提交，通过第二个页面获取数据并进行解析渲染操作，实现通过输入变量名而呈现对应数据。(两个页面的源码在文章最后) 一、向网址栏传递参数 首先创立一个a.html，这是前端给用户操作提交信息的页面，HTML的代码很简单，这里就不赘述了。 主要实现向地址栏传递参数功能的代码就是HTML中form表单中的action属性，通过get方法可以将参数挂在地址栏后面。 <form action="b.html" method="get"> 在a
如何获取地址栏的id (参数)
qq_40282446的博客
10-13 3560
获取地址栏的id 需求：获取到地址栏传递过来的id值 代码： 方法一：(需要兼容性好) //创建URLSeachParams对象，使用对象来获取地址栏的参数 var temp = new URLSearchParams(location.search); var id = temp.get('id'); // console.log(id); 方法二：(函数封装) //从...
JS获取地址栏参数的几种方法小结
12-04
代码如下:[removed] // 获取地址栏的参数数组 function getUrlParams() { var search = [removed].search; // 写入数据字典 var tmparray = search.substr(1, search.length).split(“&”); var paramsArray =...
js获取地址栏中传递的参数(两种方法)
12-07
第一种：字符串拆分法 ...//获取地址栏里（URL）传递的参数 function GetRequest(value) { //url例子：www.bicycle.com?id="123456"&Name="bicycle"； var url = decodeURI(location.search); //?id="123456"&N
详解Angular中通过$location获取地址栏的参数
10-18
本文将深入讲解如何通过$location服务获取地址栏中的参数。 首先，我们需要理解Angular中的$location服务。$location是AngularJS中的一个核心服务，它允许我们在应用程序中与当前URL进行交互。它可以用来读取URL、...
HTML页面地址栏参数传递与获取
09-20
在Web开发中，经常需要在不同页面间传递参数，以实现数据共享或状态保持等功能。传统的服务器端脚本如ASP可以通过表单（Form）的方式接收前端提交的数据。然而，除了这种方式外，还可以通过URL参数来传递数据给HTML...
js获取地址栏参数的两种方法
12-02
在JavaScript中，获取URL地址栏中的参数是常见的需求，特别是在页面间传递数据或者根据URL参数进行特定操作时。本文将详细介绍两种不同的方法来实现这一功能。 ### 方法一：使用正则表达式 第一种方法是通过创建...
地址栏传递中文参数乱码在js里用escape转码
10-26
乱码，头大的一件事可以考虑转码方式不直接传中文，在js里用escape转码，具体实现如下，有类似情况的朋友可以参考下
JS如何获取地址栏的参数实例讲解
10-17
在本篇实例讲解中，我们将深入探讨如何利用JS来获取地址栏中的参数。 地址栏中的参数通常是以问号（?）开始，然后是键值对的形式，如 `?id=6666&name=prosper`。这些参数对于传递数据到服务器或在页面加载时执行...
react 地址栏传递参数
08-16
在React中，有多种方法可以通过地址栏传递参数。其中一种方法是使用params参数。在路由链接中，可以使用`<Link>`组件将参数传递给目标页面，例如： ```jsx <Link to="/production/123">跳转到产品页面</Link> ``` 在Route组件中，需要配置参数名称，例如： ```jsx <Route path="/production/:productionId" component={production} /> ``` 在目标页面（production组件）中，可以通过this.props.match.params来获取传递的参数，例如： ```jsx const { productionId } = this.props.match.params; ``` 另一种方法是使用state参数。在路由链接中，可以使用`<Link>`组件将参数传递给目标页面，例如： ```jsx <Link to={{ pathname: '/list', state: { name: 'xlf' } }}>跳转到列表页面</Link> ``` 在目标页面中，可以通过this.props.location.state来获取传递的参数，例如： ```jsx console.log(this.props.location.state.name); // 输出传递过来的name参数 ``` 还有其他的传递参数的方法，如search参数和query参数。但是需要注意，这些方法有一些限制，例如只能传递字符串，不能传递对象，并且参数过多可能导致URL过长。另外，在使用HashRouter时，刷新地址栏会导致参数丢失，而BrowserRouter则不会丢失参数。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [React 路由传参的三种方式](https://blog.csdn.net/weixin_42332641/article/details/125374675)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [react页面跳转带参数](https://blog.csdn.net/weixin_54368936/article/details/122452871)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [react路由传递参数的几种方法](https://blog.csdn.net/Dax1_/article/details/126445502)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值