Question

我在.js文件的开头声明了一个变量：

var option="blabla";

在第1.html页上，我点击第2.html页的链接

<script>document.write(option);</script>

2.html上没有显示任何文字。当我在2.html上刷新浏览器时，我将未定义为输出。

单击链接后，我需要做什么才能直接显示文字？

或者，如何让以下代码在2.html上输出strUrl：

on 1.html我有一个链接：

<a href="2.html" onclick="function1("item")">

2.html上的

我有一个div：

<div id="display">document.write(strUrl);</div>

然后我在我的.js文件中：

function1(searchitem)
{
    strUrl = 'http://blabla.com/' 
    + '?key=' + searchitem;
}

Answer 1

您尝试在页面上创建Javascript变量，然后在另一个页面上使用它。这是一个或多或少的广泛问题，因为您希望跨页面维护值。首先，您需要确定该值的定义位置以及将在何处使用。如果这更像是服务器端变量，那么您需要在服务器端定义它，然后将其生成到您的Javascript代码中。如果您使用的是PHP，那么您可以这样做：

<script type="text/javascript>
    var foo = '<?php echo $bar; ?>';
</script>

当然，您需要初始化$bar才能执行此操作。如果变量应该是客户端变量，那么你需要在1.html上使用localStorage，如下所示：

localStorage.setItem("option", "blablabla");

然后将其加载到2.html：

localStorage.getItem("option");

或者，如果您需要在服务器端和客户端使用它，那么您可以使用cookie来实现此目的。使用cookies我稍微复杂一点，但my answer to another question应该让你去。

让我们专注于这对您不起作用的原因。卸载页面时，Javascript变量将不再存在，因此您将无法在此之后使用其值。因此，您需要以某种方式保留它，将其存储在服务器或运行浏览器的计算机上。

作为旁注，我应该提一下，如果你在页面的iframe内加载一些页面，你可以使用跨页面的Javascript变量，但这是一个不同的场景。

Answer 2

这就是FORMS和AJAX的发明。如果您的服务器有一个PHP处理器（几乎所有这些都有），那么您可以将.html文件重命名为.php并使用一些PHP来实现您的目标。

以.PHP结尾的网页完全与以.html结尾的网页完全相同，但您现在可以根据需要添加PHP代码段。没有必要拥有任何 PHP代码，但如果你有一些它可以做的东西。

方法一：表格

如果您想切换到page2.html并查看page1.html发送的值，您可以使用FORM构造并将第1页的数据发布到第2页：

<强> page1.php中

<form action="2.html" method="post"> <input name="option" type="text" /> <input type="submit" name="sub" value="Go" /> </form>

<强>使page2.php

<?php $p1 = $_POST['option']; ?> <div>On page1 of this website, you typed: <?php echo $p1; ?>. That's what you did.</div>

请注意<form>如何将name=属性用于发送到另一方的变量名称。

示例二：AJAX方法

<强> HTML：

<div id=nonForm"> <input id="option" type="text" /> <input type="button" id="myButt" value="Go" /> </div> <div id="results"></div>

<强> jQuery的：

$('#myButt').click(function(){ var opt = $('#option').val(); $.ajax({ type: 'post', url: 'page2.php', data: 'option='+opt, success: function(john){ if (d.length) alert(john); //display result from Page2 in a pop-up box $('#results').html(john); //Or, display it right on the page } }); });

PAGE2.PHP - AJAX处理器文件

<?php $opt = $_POST['option']; //Now, you can do something with the data in $opt, and then send back a result $rtn = 'Hey, you sent: ' .$opt; echo $rtn;

两种方法之间的主要（也是最重要的）区别是FORM会更改您的页面。用户将从Page1发送到Page2，当发生这种情况时屏幕会闪烁。

关于AJAX的令人兴奋的是它向Page2发送数据，其中Page2可以对其执行某些操作（例如，数据库查找），然后Page2将不同的数据发送回Page1。然后，可以在页面上显示此新数据，而不会刷新页面。

以下是一些非常基本的AJAX示例，以帮助您：

AJAX request callback using jQuery

全局变量未显示在div中

2 个答案: