两个HTML 页面间的数据传递

最新推荐文章于 2023-03-29 11:31:21 发布

转载最新推荐文章于 2023-03-29 11:31:21 发布 · 1.7k 阅读

html+css+js 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个简单的HTML表单提交示例，通过GET方法将表单数据发送到目标页面，并使用JavaScript解析URL中的查询字符串，展示了如何读取和显示表单中提交的用户名和密码。

<html>

<head lang="en">
    <meta charset="UTF-8">
    <title> 起始页面 </title>>
</head>

<body>
    <form action="page02.html" method="GET">
        用户名:<input name="username" type="text" SIZE="10"><br> 密&nbsp;&nbsp;码:
        <input name="password" type="password" SIZE="10"><br>
        <button type="submit">提交</button>&nbsp;&nbsp;
        <button type="reset">重置</button>
    </form>
</body>

</html>

第二个页面：命名page02.html

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 目标页面 </title>
    <script type="text/javascript">
        var url = document.URL;
        document.write("URL:" + url + "<br>");
        var strQuery = url.split("?")[1]
        document.write("查询字符串:" + strQuery + "<br>")
        document.write(" 解析查询字符串:" + " < br >")
        var conditions = strQuery.split(" & ")
        for (var i = 0; i < conditions.length; i++) {
            var pair = conditions[i].split("=")
            var key = pair[0];
            var value = pair[1];
            document.write(key + ":" + value + "<br>")
        }
    </script>
</head>

<body>
</body>

</html>