Question

我有2个html文件，fillForm.html和AnswerForm.html，还有一个名为scripts.js的javascript文件我想在fillForm页面中创建一个带有名称和年龄的表单，当我单击Submit时，我想检查所有表单是否已填满，并将数据发送到第二页，这将显示在屏幕上： “你好”的名字“，你的年龄是”年龄“” 我认为这有点请求和响应，但我想用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，这个检查会很长，而且检查也不是特定的但是一般）谢谢！

Answer 1

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

但是如果你想留在javascript中，可以使用localStorage存储一些数据并在下一页中使用它。但是localStorage并不适用于所有浏览器，所以要小心。

Answer 2

执行此操作的常规方法可能是使用请求将数据发布到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轻松选择），然后阅读查询字符串的内容并将其添加到该范围。

Answer 3

这不是最适合普通基于浏览器的JavaScript的工作。问题是基于浏览器的JS特定于给定页面。当该页面被丢弃时（即您提交数据时），该JavaScript将随包含它的页面消失。您可以通过会话或本地存储（使用localStorage.key = value或sessionStorage.key = value）进行传递，但这是一种解决方法，即使在提交后也会让最终用户对您的数据进行编辑。

要正确实施您的解决方案，您需要在某些方面通过Web服务器，它将管理请求，接受来自第一页的数据，保留它并将其传递到第二页。如何执行此操作完全取决于您在Web服务器上使用的语言。如果您已经熟悉JavaScript，那么nodejs可能是您的不错选择：http://nodejs.org/

Answer 4

在else部分

中使用以下代码

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

如何使用javascript在2个html页面之间发送数据？

4 个答案: