JavaScript之页面间数据传递案例

已于 2022-07-01 09:06:32 修改
阅读量2.1k 收藏 20
点赞数 2
分类专栏： 案例 文章标签： 前端 javascript
于 2022-06-30 15:24:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44827643/article/details/125540687
版权

本文主要介绍如何利用JS及html实现页面之间数据的传递，以登录之后显示用户信息为例进行讲解。

1.会话存储的使用：将用户输入的登录信息存储于会话存储空间中，当跳转至另一页面后，利用该存储空间中的信息即可进行显示。代码如下：

登录页面：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="index.html">
        <div><span>用户名：</span><input type="text"></div>
        <div><span>昵称：</span><input type="text"></div>
        <div><input type="submit" value="登录"></div>
    </form>
    <script>
        var inputs = document.querySelectorAll('input');
        inputs[2].onclick = function() {
            if (inputs[0].value == '' || inputs[1].value == '') {
                alert('输入不可为空!');
                return;
            }
            // 窗口关闭即销毁
            sessionStorage.setItem('name', inputs[0].value);
            sessionStorage.setItem('nickname', inputs[1].value);
        }
    </script>
</body>

</html>

 首页：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h1>首页</h1>
    <div><span>欢迎</span> <span></span></div>
    <div><span>你的昵称是：</span><span></span></div>
    <script>
        var spans = document.querySelectorAll('span');
        spans[1].innerHTML = sessionStorage.getItem('name');
        spans[3].innerHTML = sessionStorage.getItem('nickname');
    </script>
</body>

</html>

2.location.search的使用：利用form表单的action属性、location的href属性或是form表单的get方法可实现页面的跳转及数据在网址上的显示，之后利用location.search并结合字符串方法的使用即可获取相应的登录信息。

（1）利用form的action属性（method须指定为post请求）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="index1.html" method="post">
        <div><span>用户名：</span><input type="text"></div>
        <div><span>昵称：</span><input type="text"></div>
        <div><input type="submit" value="登录"></div>
    </form>
    <script>
        var inputs = document.querySelectorAll('input');
        var form = document.querySelector('form');
        inputs[2].onclick = function(e) {
            if (inputs[0].value == '' || inputs[1].value == '') {
                alert('输入不可为空!');
                e.preventDefault();
                return;
            }
            form.action = 'index1.html?name=' + inputs[0].value + '&nickname=' + inputs[1].value;
        }
    </script>
</body>

</html>

利用location.href:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form>
        <div><span>用户名：</span><input type="text"></div>
        <div><span>昵称：</span><input type="text"></div>
        <div><input type="submit" value="登录"></div>
    </form>
    <script>
        var inputs = document.querySelectorAll('input');
        var form = document.querySelector('form');
        inputs[2].onclick = function(e) {
            e.preventDefault();
            if (inputs[0].value == '' || inputs[1].value == '') {
                alert('输入不可为空!');
                return;
            }
            location.href = './index2.html?name=' + inputs[0].value + '&nickname=' + inputs[1].value;
        }
    </script>
</body>

</html>

两种方法的主页是一致的，如下：（需要注意的是，网址的中文若要正常显示出来，需要通过decodeURI()函数进行解码操作）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h1>首页</h1>
    <div><span>欢迎</span> <span></span></div>
    <div><span>你的昵称是：</span><span></span></div>
    <script>
        var spans = document.querySelectorAll('span');
        var t = decodeURI(location.search);
        console.log(t);
        spans[1].innerHTML = t.slice(t.indexOf('=') + 1, t.indexOf('&'));
        spans[3].innerHTML = t.slice(t.lastIndexOf('=') + 1);
    </script>
</body>

</html>

另外，form的get请求提供了更为简单的方法，可直接获取表单内容构成搜索参数。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="index1.html" method="get">
        <div><span>用户名：</span><input type="text" name="username"></div>
        <div><span>昵称：</span><input type="text" name="nickname"></div>
        <div><input type="submit" value="登录"></div>
    </form>
    <script>
        var inputs = document.querySelectorAll('input');
        var form = document.querySelector('form');
    </script>
</body>

</html>

cloudOnSkyline
关注
  • 2
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现把一个页面层数据传递到另一个页面的两种方式
10-18
主要介绍了JS实现把一个页面层数据传递到另一个页面的方式,本文给大家提供了两种方式，需要的朋友可以参考下
JavaScript页面之间的三种传值方式
weixin_44631286的博客
11-21 2133
1.页面之间的传递 采用赋值的方式完成页面之间文本框的传值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function page_value(){ var text1=document.getElementById("text_1");
html前端如何将一个页面表单内的数据全部传递到另一个页面？
热门推荐
stone_tomcate的博客
03-20 7万+
1    在你的页面的中的form标签中有个一个action 属性， 你可以给它指定某个页面，那个页面就是你对数据处理的页面 2 你的要求涉及到跨域访问,跨域访问严格上来说是不安全所以被禁止的.但是JSONP可以绕过这些设定达到交换数据的目的. 　　总而言之,序列化你要提交的表单内的数据,然后用JSONP送出去. 3 说到
JS随手记——跨页面传值
今天怎么又下雨的博客
04-27 2811
目标需求： 实现将上一个页面的值传入下一个页面中。 分析： 通过修改外链JS的全局变量无法达到效果，在上个页面修改后，加载到新的页面数据却重置了，百度说可以JS再外链JS，试了也不好使（极大可能是方法没用对），所以本篇讲的是通过在url后加值来达到传输的效果。 具体实现： 首先，跨页面传值肯定是页面跳转时传输值，将a标签的href后加“?”后加数值。当然，?这玩意本来应该不是这么用的，只是这里这样...
javascript表单之间的数据传递！
itfly的专栏
06-07 1383
      今天有朋友问我关于用JAVASCRIPT来进行页面各表单之间的数据传递的问题，我以前也写过，不过从来没有注意，今天总结了一下，希望能够给大家一些帮助，也帮助我总结以前学过，用过的知识。    一，最简单的就是同一个网页里的表单的数据传递。     举个实例，一个网页上有两个表单，每个表单里一个文本框，一个按钮。点按钮互相对操作对方的文本框的值。我们举的例子是把一个文本框付给另一
javascript 两个页面之间传值
10-17
javascript 两个页面之间传值 使用window.open（）
通过JavaScript来实现页面间数据传递
2301_77405158的博客
04-14 2620
【代码】通过JavaScript来实现页面间数据传递。
.net页面间的参数传递简单实例
ghtwht's blog
05-08 637
使用QueryString使 用QuerySting在页面间传递值已经是一种很老的机制了，这种方法的主要优点是实现起来非常简单，然而它的缺点是传递的值是会显示在浏览器的地址栏 上的（不安全），同时又不能传递对象，但是在传递的值少而安全性要求不高的情况下，这个方法还是一个不错的方案。使用这种方法的步骤如下:1，使用控件创建web表单（form）2，创建可以返回表单的按钮和链接按钮3，在按钮或链接
js静态页面间的传值
黄长旭的专栏
03-07 4664
一：JavaScript静态页面值传递之URL篇 能过URL进行传值.把要传递的信息接在URL上. 例子： 参数传出页面Post.htm—>   function Post() { 　　//单个值 Read.htm?username=baobao; 　　//多全值 Read.htm?username=baobao&sex=male; 　　url = "Read.h
javascript浏览器窗口之间传递数据的方法
10-24
主要介绍了javascript浏览器窗口之间传递数据的方法,实例分析了父窗口与子窗口之间传递参数的使用技巧,非常具有实用价值,需要的朋友可以参考下
JavaScript实现在页面间传值的方法
10-24
主要介绍了JavaScript实现在页面间传值的方法,涉及javascript传值的技巧,非常具有实用价值,需要的朋友可以参考下
JS传值到另外一个页面及显示出来
08-31
JS传到到另外一个页面,有需要下载去吧，如果有什么疑问加QQ:196472414
WebSocket实战之——JavaScript例子
02-25
从WebSocket通讯三个阶段（打开握手、数据传递、关闭握手）进行了探讨，各阶段中浏览器和服务器做了些什么事情也有所涉及。 二、主要代码解读：1、申请一个WebSocket对象参数是需要连接的服务器端的地址，同http...
JavaScript经典实例
06-05
　6.3把复杂的数据对象传递给函数 　6.4创建一个动态运行时函数 　6.5把一个函数当做参数传递给另一个函数 　6.6实现递归算法 　6.7创建能够记住其状态的函数 　6.8使用一个通用的科里化函数提高应用程序性能 　6.9...
程序天下:JavaScript实例自学手册
07-08
第16章 页面数据的验证 16.1 验证字符串是否全由数字组成 16.2 验证表单项必须填写 16.3 判断用户输入是否为中文 16.4 验证列表框中的值是否重复 16.5 检测输入框的统一方法 16.6 Email的验证 16.7 不使用正则验证IP...
js前端Web Woeker和Shared Worker使用案例demo
11-02
2. 消息传递：通过使用postMessage方法，可以实现主线程与Web Worker之间的消息传递，实现数据的交互和共享。 3. 数据共享：Web Worker可以访问主线程的全局变量和函数，从而实现数据的共享和跨域通信。 4. 异步处理...
原生JS Form表单发送post请求给后台传递数据
逗逗的博客
05-06 3758
formData: function (url, data1, data2) { //url后台地址 //data1,data2后台接收的参数值 var tempForm = document.createElement("form"); tempForm.id = "tempForm1"; te...
Js_表单间数据传递
ALL TECHNOLOGIES ARE CLOUDS
06-17 114
一，同一个网页里的表单的数据传递。    举个实例，一个网页上有两个表单，每个表单里一个文本框，一个按钮。点按钮互相对操作对方的文本框的值。我们举的例子是把一个文本框付给另一个文本框。具体的HTML代码如下：    &lt;html&gt;  &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; cha...
JS页面间数据传递的各种方法和分析
不去想结果，一直在路上
05-08 6841
1、数据传递的各种方法和分析 1.1 使用Querystring 方法 QueryString 也叫查询字符串， 这种方法将要传递的数据附加在网页地址(URL)后面进行传递。如页面A.aspx 跳转到页面B.aspx，可以用Request.Redirect("B.aspx?参数名称=参数值")方法，也可以用超链接：，页面跳转后，在目标页面中可用Ruquest["参数名称
javascript+vue.js web开发案例教程
最新发布
11-09
JavaScript是一种流行的编程语言，被广泛用于网页开发。Vue.js是一个基于JavaScript的前端开发框架，它提供了一套简洁、灵活的工具，使得开发者可以更轻松地构建交互式的Web应用程序。 Vue.js具有以下特点： 1. 渐进式：Vue.js采用渐进式的设计，可以逐步引入到现有的项目中，也可以通过逐步学习来适应各种开发需求。 2. 轻量级：Vue.js的核心库只有约21KB，加载速度快，非常适合于移动端开发。 3. 组件化：Vue.js支持组件化的开发方式，开发者可以根据需要构建复用性高、可维护性好的组件，提高开发效率。 4. 响应式：Vue.js采用了响应式的设计，当数据发生变化时，对应的页面会自动更新，大大减少了处理DOM操作的工作。 5. 单文件组件：Vue.js支持单文件组件的开发方式，将HTML、CSS、JS代码封装在同一个文件中，提高了代码的可读性和可维护性。 一个使用Vue.js的Web开发案例教程可能包含以下内容： 1. 环境搭建：介绍如何安装配置开发Vue.js的环境，如Node.js和Vue CLI。 2. 基础语法：引导学习者了解Vue.js的基本语法和常用指令，如数据绑定、事件处理、条件渲染等。 3. 组件开发：讲解如何使用Vue.js构建组件，如何进行组件通信、数据传递等。 4. 路由管理：介绍Vue Router，帮助学习者构建单页应用程序，实现页面之间的切换和导航。 5. 状态管理：介绍Vuex，帮助学习者管理应用程序的状态，实现数据的集中管理和共享。 6. 前后端交互：介绍如何使用Axios等工具，与后端服务器进行数据交互。 7. 实战项目：引导学习者完成一个完整的Vue.js项目，如博客系统、电子商务网站等。 通过这样的案例教程，学习者可以逐步了解和掌握Vue.js的开发思想和技术，提高自己的Web开发能力。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值