JavaScript数据在不同页面的传递（URL参数获取）

        网页中，我们常常遇到这种情况，当我们在某个页面输入信息的时候，会跳转到另一个页面，并且会将我们输入的信息传递到另一个页面中，怎样操作呢？
今天，我们就来实战一下，比如，现在有两个页面，当我们在一个页面输入用户信息的时候，就会跳转到另一个页面并显示，xx欢迎登录的界面。

先来看看设计思路：

  • 第一个登录页面，里面有提交表单, action 提交到index.html页面
  • 第二个页面，可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果
  • 第二个页面之所以可以使用第一个页面的数据，是利用了URL 里面的 location.search参数
  • 在第二个页面中，需要把这个参数提取。
  • 第一步利用substr 去掉 ？
  • 第二步 利用split(‘=‘)分割 键 和 值
  • 第一个数组就是键 第二个数组就是值

实现代码为：

<body>
    <form action="index.html">
        用户名：<input type="text" name = 'uname'>
        <input type="submit" value="提交">
    </form>
</body>

<body>
    <div><span style="font-weight:700; color:blue"></span>欢迎登录！</div>
    <script>
       var span = document.querySelector('span');//获取span标签
       var myName = location.search.substr(1);//得到上一个页面输入的参数
       var arr = myName.split('=');//利用=号分割 键 和 值
       span.innerHTML = arr[1] + ''//将数据传入span
    </script>
</body>

运行效果为：

到此这篇关于JavaScript数据在不同页面的传递（URL参数获取）的文章就介绍到这了,更多相关JavaScript数据在不同页面的传递 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS控制静态页面传递参数并获取参数应用

    在项目中遇到这也一个问题: 有a.html和b.html. 1.a页面已经打开,b页面尚未打开,我希望在a页面设置好一些列参数,比如背景色,宽度等参数,传递给b页面,好让b页面在打开就能应用. 2.a页面已经打开,b页面无论是否打开.在a页面需要获取到b页面的一些元素甚至变量,以便于应用到a页面. 注意:不涉及跨域问题. 想了很久,终于想到了解决方案. 第一个问题,我们可以利用html页面锚点的特性,将参数通过url传递给b页面 这是a页面代码: <button>跳转设置</button

  • SpringMVC 向jsp页面传递数据库读取到的值方法

    在开发过程中,我们经常需要将数据库查询到的值放入jsp页面进行显示,在springmvc的controller中,我们采用request将数据传递过去. 思路: 1.在comtroller中调用service层的方法获取数据库的数据,并且将其通过modelandview的addObject方法放置到域中 2.在jsp页面中通过jsp标签进行读取 开发controller.java文件: //查询所有数据到页面显示 @RequestMapping("/dataAll") public M

  • javascript通过url向jsp页面传递中文参数导致乱码解决方案

    2013-1-16 10:35:49 org.apache.tomcat.util.http.Parameters processParameters 警告: Parameters: Character decoding failed. Parameter 'id' with value '%u8BA2%u5355' has been ignored. Note that the name and value quoted here may corrupted due to the failed

  • JavaScript数据在不同页面的传递（URL参数获取）

    JavaScript数据在不同页面的传递（URL参数获取）

            网页中,我们常常遇到这种情况,当我们在某个页面输入信息的时候,会跳转到另一个页面,并且会将我们输入的信息传递到另一个页面中,怎样操作呢? 今天,我们就来实战一下,比如,现在有两个页面,当我们在一个页面输入用户信息的时候,就会跳转到另一个页面并显示,xx欢迎登录的界面. 先来看看设计思路: 第一个登录页面,里面有提交表单, action 提交到index.html页面 第二个页面,可以使用第一个页面的参数,这样实现了一个数据不同页面之间的传递效果 第二个页面之所以可以使用第一个页面

  • 使用Python爬虫库requests发送请求、传递URL参数、定制headers

    首先我们先引入requests模块 import requests 一.发送请求 r = requests.get('https://api.github.com/events') # GET请求 r = requests.post('http://httpbin.org/post', data = {'key':'value'}) # POST请求 r = requests.put('http://httpbin.org/put', data = {'key':'value'}) # PUT请

  • spring boot 常见http请求url参数获取方法

    在定义一个Rest接口时通常会利用GET.POST.PUT.DELETE来实现数据的增删改查:这几种方式有的需要传递参数,后台开发人员必须对接收到的参数进行参数验证来确保程序的健壮性 GET:一般用于查询数据,采用明文进行传输,一般用来获取一些无关用户信息的数据 POST:一般用于插入数据 PUT:一般用于数据更新 DELETE:一般用于数据删除:一般都是进行逻辑删除(即:仅仅改变记录的状态,而并非真正的删除数据) 1.@PathVaribale 获取url中的数据 请求URL:localhos

  • Laravel 之url参数,获取路由参数的例子

    如下所示: echo '<pre>'; var_dump( $request->url() ); // url echo '</pre>'; echo '<pre>'; var_dump( $request->route( 'email' ) ); //获取路由参数 echo '</pre>'; echo '<pre>'; var_dump( $request->method() ); // methed echo '</

  • PHP URL参数获取方式的四种例子

    在已知URL参数的情况下,我们可以根据自身情况采用$_GET来获取相应的参数信息($_GET['name']);那,在未知情况下如何获取到URL上的参数信息呢? 第一种.利用$_SERVER内置数组变量 相对较为原始的$_SERVER['QUERY_STRING']来获取,URL的参数,通常使用这个变量返回的会是类似这样的数据:name=tank&sex=1如果需要包含文件名的话可以使用$_SERVER["REQUEST_URI"](返回类似:/index.php?name=t

  • 在jsp页面如何获得url参数

    当一个url过来时,如:http://localhost:8080/pro/demo/hello.jsp?name=john,在hello.jsp页面,我们可以这样得到name的值: 复制代码 代码如下: <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getSer

  • php解析url并得到url中的参数及获取url参数的四种方式

    下面一段代码是php解析url并得到url中的参数,代码如下所示: <?php $url = 'http://www.baidu.com/index.php?m=content&c=index&a=lists&catid=6&area=0&author=0&h=0&region=0&s=1&page=1'; $arr = parse_url($url); var_dump($arr); $arr_query = convertU

  • C#分析URL参数并获取参数和值对应列表的方法

    本文实例讲述了C#分析URL参数获取参数和值对应列表的方法.分享给大家供大家参考.具体分析如下: 这个C#函数用于分析url中传递的所有参数,输出一个参数名和参数值对应的NameValueCollection列表,经常能用得到 /// <summary> /// 分析 url 字符串中的参数信息 /// </summary> /// <param name="url">输入的 URL</param> /// <param name=

  • 微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解

    微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解

    本文实例讲述了微信小程序学习笔记之跳转页面.传递参数获得数据操作.分享给大家供大家参考,具体如下: 前面一篇介绍了微信小程序表单提交与PHP后台数据交互处理.现在需要实现点击博客标题或缩略图,跳转到博客详情页面. 开始想研究一下微信小程序的web-view组件跳转传参,把网页嵌入到小程序,结果看到官方文档的一句话打消了念头,因为没有认证...... [方法一 使用navigator组件跳转传参] 前台博客列表页面data.wxml:(后台数据交互参考上一篇) <view wx:for="{

随机推荐