两个html页面间如何传递数据

两个html页面间如何传递数据

最近自己再做一些web的开发项目,在不同的html之间传递数据我总结了3种方式。

一.通过表单简单的传输数据,利用js代码接收传递的数据,注意method属性要设为get。

<form id="form" action="data.html" method="get"></form>//action的值是你的目的html
在你的目的html中可通过url接收传递的数据,并将数据保存在一个对象中。
<script type="text/javascript" charset="utf-8">
    window.onload = function() {
        var url = window.location.search;//location.search是从当前URL的?号开始的字符串
        console.log(url);
        var Request = new Object();
        if (url.indexOf('?') != -1) {
            var a = '';
            var str = url.substr(1)  //去掉?号
            strs = str.split('&');
            for (var i = 0; i < strs.length; i++) {
                a = strs[i].split('=')[0];
                Request[a] = decodeURI(strs[i].split('=')[1]);//解码,生成获取信息的对象
                console.log(Request[a]);
            }
        }
        console.log(Request);

注意这种方式传递中文数据需要用decodeURIComponent()或decodeURL()函数解码,unescape()现在似乎已经淘汰了。
然后利用document.write()或innerHTML等方法或函数将数据显示在网页上。此种方法适合自己平时写JS的小练习,此种方法无法将数据保存下来。

2.使用Cookie传递参数

下面是简单的实例,a页面保存Cookie,b页面读取。
a.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>a</title>
    <script type="text/javascript">
        /***
         * @param {string} cookieName Cookie名称
         * @param {string} cookieValue Cookie值
         */
        function SetCookie(cookieName,cookieValue) {
            /*设置Cookie值*/
            document.cookie = cookieName + "=" + escape(cookieValue)
        }
        function login() {
            var username = $("user").value;
                if(username.length>0 && username) {
                    SetCookie("username", username);
                    /*跳转到b.html页面*/
                    document.location = "b.html";
                }
        }
        function $(id) {
            return document.getElementById(id);
        }
    </script>
</head>
<body>
<div id="main">
    <div><span>请输入你的名字</span><input type="text" id="user" /></div>
    <div>
        <input type="button" onclick="login()" value="提交" />
    </div>
</div>
</body>
</html>

b.html

<html>
<head>
    <meta charset="UTF-8">
    <title>b</title>
    <script type="text/javascript">
        /***
         *读取指定的Cookie值
         *@param {string} cookieName Cookie名称
         */

        function ReadCookie(cookie_name){
            //判断是否存在cookie
            if (document.cookie.length > 0){
                //查询cookie开始部分
                cookie_start = document.cookie.indexOf(cookie_name + "=")
                //如果存在
                if (cookie_start != -1){
                    //计算结束部分
                    cookie_start = cookie_start + cookie_name.length + 1
                    cookie_end = document.cookie.indexOf(";", cookie_start)
                    //如果已经是最后一个cookie值,则取cookie长度
                    if (cookie_end == -1) {
                        cookie_end = document.cookie.length
                    }
                    //获取cookie值,unescape对特殊字符解密
                    return unescape(document.cookie.substring(cookie_start,cookie_end))
                }
            }
            //其它情况返回空
            return ""
        }

        function $(id) {
            return document.getElementById(id);
        }

        function init() {
            var username = ReadCookie("username");
            if(username && username.length>0) {
                $("msg").innerHTML = "<h1>欢迎光临," + username + "!</h1>";
            } else {
                $("msg").innerHTML = "<a href='a.htm'>请录入名字</a>";
            }
        }
    </script>
</head>
<body onload="init()">
<div id="msg"></div>
</body>
</html>

此种方法也是适合自己平时写JS的小练习,此种方法无法将数据保存下来。

3.通过web服务器利用前后端交互

前后端交互又可分为表单交互和url参数交互。表单交互是指在HTML中创建一个表单,用户填写表单后提交给服务器,服务器收到表单后返回处理结果。其大致构成如下:
URL参数经常用于浏览器向服务器提交一些请求信息。其流程图大致如下:
例如利用nodejs与json文件相连接,实现对本地json数据的增删改查,在不同网页间传递数据。

var fs = require('fs');
var id=document.getElementById("id");
var name=document.getElementById("name");
var url = window.location.search;//location.search是从当前URL的?号开始的字符串
console.log(url);
var params = new Object();
params.id=id;
params.name=name;

writeJson(params);
//写入json文件选项
function writeJson(params){
    //现将json文件读出来
    fs.readFile('./person.json',function(err,data){
        if(err){
            return console.error(err);
        }
        var person = data.toString();//将二进制的数据转换为字符串
        person = JSON.parse(person);//将字符串转换为json对象
        person.data.push(params);//将传来的对象push进数组对象中
        person.total = person.data.length;//定义一下总条数,为以后的分页打基础
        id.innerHTML=person.data[id].name;
        console.log(person.data);
        var str = JSON.stringify(person);//因为nodejs的写入文件只认识字符串或者二进制数,所以把json对象转换成字符串重新写入json文件中
        fs.writeFile('./mock/person.json',str,function(err){
            if(err){
                console.error(err);
            }
            console.log('----------新增成功-------------');
        })
    })

上例代码可通过person.json文件传递数据,注意浏览器端不能识别require关键字,require是node.js环境下的,要通过工具browserify或者是webpack把js文件编译一下,转成浏览器端可识别的。当然也可以通过其他方式连接其他的数据库,比如Java与sql数据库相连、php写后端也可。

  • 9
    点赞
  • 48
    收藏
  • 打赏
    打赏
  • 1
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 1

打赏作者

想躺

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值