脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript数据在不同页面的传递

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

 更新时间：2022年01月25日 09:17:30   作者：bear*6  
这篇文章主要介绍了JavaScript数据在不同页面的传递（URL参数获取），下面文章围绕JavaScript数据在不同页面的传递的实现过，想了解的小伙伴可以和小编一起进入文章了解具体内容,需要的也朋友可参考一下

        网页中，我们常常遇到这种情况，当我们在某个页面输入信息的时候，会跳转到另一个页面，并且会将我们输入的信息传递到另一个页面中，怎样操作呢？
今天，我们就来实战一下，比如，现在有两个页面，当我们在一个页面输入用户信息的时候，就会跳转到另一个页面并显示，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数据在不同页面的传递 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • javascript最短的拖动代码[兼容FF]

    javascript最短的拖动代码[兼容FF]

    javascript最短的拖动代码[兼容FF]...
    2007-10-10
  • js DOM的学习笔记

    js DOM的学习笔记

    DOM是Document Object Model文档对象模型的缩写；使用JavaScript操作DOM进行DHTML开发
    2011-12-12
  • JavaScript 如何实现同源通信

    JavaScript 如何实现同源通信

    在日常工作中，你可能会遇到同源页面间通信的场景。针对这种场景，我们可以使用 localStorage 和 storage 事件来解决同源页面间通信的问题。除此之外，我们还可以使用 Broadcast Channel API 来解决该问题。接下来，将带大家一起来认识一下 Broadcast Channel API。
    2021-05-05
  • JS转换金额大写方法详细例子

    JS转换金额大写方法详细例子

    在处理财务账款类需求时需要将转账金额写成大写的,下面这篇文章主要给大家介绍了关于JS转换金额大写方法的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下
    2023-10-10
  • JS中将blob返回值转换为json格式的问题小结

    JS中将blob返回值转换为json格式的问题小结

    这篇文章主要介绍了JS中如何将blob返回值转换为json格式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-12-12
  • JavaScript进制数之间的互相转换

    JavaScript进制数之间的互相转换

    这篇文章主要介绍了JavaScript进制数之间的互相转换，进制转换是人们利用符号来计数的方法，下文基于JavaScript实现进制数之间的转换，有一定的知识性参考价值，需要的小伙伴可以参考一下
    2022-05-05
  • js下用eval生成JSON对象

    js下用eval生成JSON对象

    在使用eval生成JSON对象时，一定要注意添加一对圆括号
    2010-09-09
  • 一文详解Promise.race()方法功能及应用场景

    一文详解Promise.race()方法功能及应用场景

    这篇文章主要为大家介绍了Promise.race()方法功能及应用场景详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • JS数组操作中的经典算法实例讲解

    JS数组操作中的经典算法实例讲解

    下面小编就为大家带来一篇JS数组操作中的经典算法实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • LBS blog sql注射漏洞[All version]-官方已有补丁

    LBS blog sql注射漏洞[All version]-官方已有补丁

    LBS blog sql注射漏洞[All version]-官方已有补丁...
    2007-08-08

最新评论