如何使用JavaScript在两个HTML页面之间发送数据？

Question

如何使用JavaScript在两个HTML页面之间发送数据？

3

我有两个html文件， fillForm.html和AnswerForm.html，还有一个名为scripts.js的JavaScript文件。我想在fillForm页面中创建一个包括姓名和年龄的表单，当我点击提交按钮时，我想要检查所有表单都已填写完整，并将数据发送到第二个页面，在屏幕上显示：“你好”+ "姓名" + "，你的年龄是" + "年龄"。我认为涉及请求和响应，但我想用post方法而不是get方法从url中获取数据。在fillForm页面中，我有以下代码：

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="scripts.js"></script>
    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.8.2.js" 
         type="text/javascript"></script>

    </head>

    <body>
        <form name="myForm" action="AnswerForm.html" onsubmit="return validateForm()" method="post">
            First name: <input type="text" name="fname"><br/>
            Age: <input type="text" name="age">
            <input type="submit" value="Submit">
        </form>
    </body>

</html>

脚本文件 scripts.js 的代码如下：

function validateForm()
{
    var firstName=document.forms["myForm"]["fname"].value;
    var Age=document.forms["myForm"]["age"].value;
    if ((firstName==null || firstName=="") || (Age==null || Age==""))
    {
          alert("fillOut  all the form");
          return false;
    }
    else
    {

    }
}

现在我想把数据显示在ANSWERFORM.html上，我需要帮助。另外我有一个问题：表单的检查是否好用？还是有更好的方法进行检查？因为如果我不是要检查2个数据而是40个数据，这个检查会非常耗时，而且检查也不是很具体。

- shlomi

3

没有服务器进程就无法发布到HTML。那么cookie或Ajax呢？ - mplungjan

您需要编写服务器端代码来接收数据、处理数据，然后通过第二个 HTML 输出。 - closure

这里真正的问题是：你想在服务器端还是客户端完成这个任务？ - mkey

@Naryl 我不需要 PHP，只需要 HTML 和 JS。 - shlomi

@shlomi 如果你想学习更多，那么最好的办法可能是获取一个服务器。即使是简单的事情（正如你可能已经意识到的那样），它也是非常重要的。你需要问自己，数据发布后会发生什么，它将如何传递到下一页？ - cammil

显示剩余6条评论

4个回答

0

通常情况下，这样做的方法可能是将数据与请求一起发送到Web服务器，使用一些服务器端语言来处理并在下一页上正确呈现数据，但我想也可以使用JavaScript来实现类似的功能。

想法是修改HTML表单以通过HTTP GET而不是POST发布数据。当调用AnswerForm.html时，您的表单数据将添加到查询字符串中。在答案页面上，您可以使用类似于SO answer描述的示例之类的内容读取查询字符串，然后通过一些简单的DOM操作在加载时将内容注入到答案页面中。

注意：此解决方案将完全依赖JavaScript进行工作，否则用户将在答案页面上看不到任何数据。

更新：

使用上面引用的SO帖子中找到的示例，您可以像这样做：

<html>
   <head>
        <title>Foo</title>
        <script>
        function getParameterByName(name)
        {
            name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
            var regexS = "[\\?&]" + name + "=([^&#]*)";
            var regex = new RegExp(regexS);
            var results = regex.exec(window.location.search);
            if(results == null)
                return "";
            else
                return decodeURIComponent(results[1].replace(/\+/g, " "));
        }
        </script>
   </head>
   <body> 
      Hello <span id="fname"></span>
      <script>
         var fname = getParameterByName("fname");
         document.getElementById("fname").innerText = fname;
      </script>
   </body> 
</html>

为了让您更方便，您可以添加一个带有ID的span元素（以便通过javascript轻松选择），然后读取查询字符串的内容并将其添加到该span中。

- Christofer Eliasson

谢谢，我不想用get方法，只想用post方法，但我也试过了get方法。我看到了url中的参数，但我该如何使用它们？这是我的AnswerForm.html：<html> <head> <script type="text/javascript" src="scripts.js"></script> <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.8.2.js" type="text/javascript"></script> <script type="text/javascript"> var Fname = getUrlVars()["fname"]; var Age = getUrlVars()["age"]; $_GET["fname"] </script> </head> <body> 你好（我需要在这里写什么？！） </body></html> - shlomi

0

在else部分使用以下代码

document.forms["myForm"].action="AnswerForm.html?fanme="+firstName+"&age="+Age;
return true;

- Maheshkumar

I want to do it with post, and not take data from the url with get. - Marty

0

这不是最适合使用普通基于浏览器的JavaScript的工作。问题在于，基于浏览器的JS是特定于给定页面的。当该页面被处理掉（也就是当您提交数据时），包含它的页面上的JavaScript也会消失。您可以通过会话或本地存储传递（使用localStorage.key = value或sessionStorage.key = value），但这是一种变通方法，并且即使在提交后，您的数据也仍然可以被最终用户编辑。

要正确实现您的解决方案，您需要以某种方式通过Web服务器进行传递，该服务器将管理请求，接受第一个页面中的数据，保留它并将其传递到第二个页面。如何做到这一点完全取决于您在Web服务器上使用的语言。如果您已经熟悉JavaScript，则nodejs可能是一个不错的选择：http://nodejs.org/

- Levi Botelho

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Magus · Accepted Answer

通常需要服务器端的代码/进程来处理这样的数据。

但是如果您希望使用JavaScript，可以使用localStorage存储一些数据，并在下一页中使用。但是要注意，localStorage并不适用于所有浏览器。