Question

这是我的第一个网站和项目，我希望能够完成它。

我的房间里有一个小的，简单的网站在Raspberry Pi 2上运行。在网站上，用户投票是或否。我的问题是，有些东西不起作用。

浏览器未显示从文本文件中获取的变量的正确值。当按下是或否按钮时，PHP应该向$yes变量或$no变量添加1，具体取决于单击了哪个按钮。当您看到下面的代码时，这将更加清晰。

但有时，变量未在页面底部的表格中正确回显。每次按下按钮时，文本文件中的变量都会更新。这让我相信它与回声或写作和阅读速度有关。刷新页面时，表通常会更新。

以下代码是我的HTML页面。我认为这是正确的。如果这表明我缺乏经验，请道歉;我对所有建议持开放态度！

    <!DOCTYPE HTML>
<!--start of html. sets background image-->
<html style="background-image: url(confectionary.png); color:black; padding:20px;">
<head>
    <title>Is the Sky Blue | Vote</title>
        <!--sets up js funtion for buttons to call and start running it-->
        <script type="text/javascript" src="vote.js"></script>
            <!--calls css to position yes and no buttons-->
            <link rel="stylesheet" href="navbar.css">
</head>
<body>
<!--first header-->
<h1 align="center"><font size="7">Is the sky blue?</h1>
    <!--div with class="menu" allow css above to center the yes and no buttons-->
    <div class="menu">
        <ul>
        <li name="vote" value="0" onclick="getVote(0)"><font size="6"><a href="yes.php">Yes</a></li>
        <li name="vote" value="1" onclick="getVote(1)"><font size="6"><a href="no.php">No</a></li>
        </ul>
    </div>

<!--image of the sky-->
<div style="text-align: center;"><img style="width: 800px; height: 600px;" alt="" src="sky.jpg"></div>

</body>
</html>

下面的是.php

    <!DOCTYPE HTML>
<!--start of html. sets background image-->
<html style="background-image: url(confectionary.png); color:black; padding:20px;">
<head>
    <title>Thank You For Voting</title>
        <!--calls css to position yes and no buttons-->
        <link rel="stylesheet" href="navbar.css">
</head>
<body>
<!--first header-->
<h1 align="center"><font size="6">Thank You For Voting</h1>
    <div class="menu">
        <ul>
        <li><font size="6"><a href="index.html">Home</a></li>
        </ul>
    </div>
<hr>
<p align="center"><font size="5">You have voted that the sky is blue.</p>

<!--first part of php which declares variables for the table to use-->
<?php
$filename = "poll_result.txt";
$content = file($filename);
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
$total = $yes + $no;
?>

<!--table of results and graph-->
<h4>Result:</h4>
<table>
<tr>
<td>Yes:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>Total number of votes:</td>
<td><?php echo $total; ?></td>
</tr>
</table>

</body>
</html>

下面的投票.js

function getVote(int) {
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {  // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("poll").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","poll_vote.php?vote="+int,true);
  xmlhttp.send();
}

下面的poll_vote.php

<?php
$vote = $_REQUEST['vote'];

//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);

//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];

if ($vote == 0) {
  $yes = $yes + 1;
}
if ($vote == 1) {
  $no = $no + 1;
}

//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>

这是网站背后的大部分代码。

为什么表中没有正确显示$total变量？

Answer 1

我怀疑您可能会遇到以下一个或两个问题：

同时做两件事 - 行为可能意外？

当您点击＆＃34;是＆＃34;链接，你在同一时间做两件事：

向poll_vote.php发送AJAX请求
导航至yes.php

如果导航发生的速度比AJAX请求完成的速度快，则可能会终止AJAX请求。或者，它可能会成功，但在AJAX请求完成之前检索了poll_vote.php，这意味着poll_vote.php可能显示过时的结果（在这种情况下刷新应该有效）。

我可能会做的是（快速入侵）在location.href="yes.php"行之后使用document.getElementById("poll").innerHTML=xmlhttp.responseText;，并删除A标记，以便仅在完成AJAX请求时导航到是.php发生了。更简洁的方法是将轮询代码移动到yes.php（意味着在输出总数等之前更新yes.php本身的文本文件值），从而完全避免XMLHttpRequest。您可以在另一个文件中编写代码，然后在yes.php中include编写代码，这样代码也可以包含在no.php中，您可以避免重复两次。

浏览器缓存

浏览器可能正在缓存poll_vote.php页面，或yes.php页面，或两者都有！例如，当你运行

 xmlhttp.open("GET","poll_vote.php?vote="+int, true);

浏览器可能决定：嘿，我之前已经检索过poll_vote.php？vote = 0，我不需要再次检索它，因此服务器端（PHP）从未收到请求。要解决此问题，您可以将随机值附加到GET请求，例如

xmlhttp.open("GET","poll_vote.php?vote="+int+"&rand="+Math.random(),true);

或Prevent browser caching of jQuery AJAX call result中提到的其他一些方式。一个更优雅的＆＃34;解决方案是让poll_vote.php发送标题告诉浏览器：不要缓存我！见How to prevent Browser cache for php site

另一个问题可能是yes.php也被缓存了！如上所述，浏览器认为，我刚刚检索到yes.php，我不必再次检索它，因此它显示了之前检索过的页面（使用过时的数据）。

PHP默认情况下会发送no-cache标头，但是当我测试你的代码时，它在Chrome中运行正常，但在IE中则不行。似乎（当我尝试时）IE缓存poll_vote.php文件，因此我不得不添加该随机数的东西，以使其在IE中一致地工作。

AJAX民意调查后面的PHP和HTML不起作用

1 个答案: