获取URL参数数据，实现在不同页面数据相互传递

最新推荐文章于 2023-11-22 21:36:39 发布

龙眸

最新推荐文章于 2023-11-22 21:36:39 发布

阅读量343

点赞数

分类专栏：笔记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_52065872/article/details/124558645

版权

笔记专栏收录该内容

73 篇文章 1 订阅

订阅专栏

该博客介绍了一个通过URL参数在不同页面间传递数据的案例。在logain.html中，用户输入的用户名被提交到index.html。在index.html中，通过JavaScript获取URL的查询字符串，解析出用户名，并将其显示在页面上。这个过程涉及到了location.search属性的使用，字符串的处理（如substr和split方法），以及DOM操作将数据展示在页面上。

摘要由CSDN通过智能技术生成

案例说明

获取URL参数数据，实现在不同页面数据相互传递（利用URL里面的location.search参数）

案例分析

各方面分析

案例实现代码

logain.html中的代码

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

index中的代码

<div></div>
    <script>
        console.log(location.search); //?uname=xyw
        // 1.先去掉？ substr('起始的位置'，截取几个字符);
        var params = location.search.substr(1);
        console.log(params);
        // 2.利用=把字符串分割为数组 split('=');
        var arr = params.split('=');
        console.log(arr); //['uname', 'xyw']
        var div = document.querySelector('div');
        // 3.把数据写入div中
        div.innerHTML = arr[1] + '欢迎您！';
    </script>