案例：获取URL参数接收上个页面表单提交的url值

最新推荐文章于 2021-07-01 09:29:12 发布

原创最新推荐文章于 2021-07-01 09:29:12 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个简单的HTML和JavaScript示例，展示了如何从一个表单提交的数据中获取URL参数，并将其显示在一个网页上。通过实例代码，读者可以了解如何使用JavaScript操作DOM元素来实现这一功能。

案例：获取URL参数

接收上个页面表单提交的url值

动图展示：

在这里插入图片描述

代码展示：

//页面一
<form action="获取URL参数.html" method="get">
    <input type="text" name="name">
    <input type="submit">
</form>

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