JavaScript 问题？

Question

现在，当我有用户投票时，脚本会更新我的数据库，但它不会显示下面的代码来告诉用户其投票已被排除，除了我的 AJAX 代码之外，其他一切都正常工作。

如何解决此问题，让以下代码在用户输入投票时显示新的评级？

我正在使用 PHP

这是 JavaScript 代码。

    function vote(id, rating) {
        if (window.XMLHttpRequest) {
            http = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            http = new ActiveXObject("Microsoft.XMLHTTP");
        }
        var url = 'ajax.php?';
        var fullurl = url + 'id=' + id + '&rating=' + rating;
        //This will create the request to our file, with the information about the vote.
        http.open("GET", fullurl, true);
        http.send(null);
        http.onreadystatechange = statechange_rate;
    }

    function statechange_rate() {
        if (http.readyState == 4) {
            var xmlObj = http.responseXML;
            var html = xmlObj.getElementsByTagName('result').item(0).firstChild.data;
            var id = xmlObj.getElementsByTagName('result').item(0).getAttribute("id");
            var votes = xmlObj.getElementsByTagName('result').item(0).getAttribute("votes");
            var rating = xmlObj.getElementsByTagName('result').item(0).getAttribute("rating");
            //Before, you may have noticed we set votes="-1" if they had already voted, this was just to provide an easy way to check the return of our ajax.php script.
            if(votes != -1) {
                //This will inform the user about the vote they have cast.
                document.getElementsByName('output_' + id).item(0).innerHTML = "<br />" + html;
                //This will set a delay to make that message go away in 5000 miliseconds (5 seconds).
                window.setTimeout("document.getElementsByName('output_" + id + "').item(0).innerHTML = '';", 5000);
                //This will update the rating on the page to the new one.
                document.getElementsByName('rating_' + id).item(0).innerHTML = rating;
                document.getElementsByName('votes_' + id).item(0).innerHTML = votes;
            }else{
                document.getElementsByName('output_' + id).item(0).innerHTML = "<br />" + html;
                window.setTimeout("document.getElementsByName('output_" + id + "').item(0).innerHTML = '';", 5000);
            }
        }
    }

Answer 1

我从未见过你所展示的内容，所以我不知道这是否是你的问题，但你有一个名为

<result>...</result>

的标签？

你有这句话，这引出了我的问题：

xmlObj.getElementsByTagName('result')...

如果您可以这样修改您的

statechange_rate

，将会很有帮助：

alert("votes result: " + votes);
if(votes != -1) {
  //This will inform the user about the vote they have cast.
  var elem = document.getElementsByName('output_' + id);
  elem.item(0).innerHTML = "<br />" + html;
  //This will set a delay to make that message go away in 5000 miliseconds (5 seconds).
  window.setTimeout("document.getElementsByName('output_" + id + "').item(0).innerHTML = '';", 5000);
  //This will update the rating on the page to the new one.
  elem = document.getElementsByName('rating_' + id);
  elem.item(0).innerHTML = rating;
  elem = document.getElementsByName('votes_' + id);
  elem.item(0).innerHTML = votes;

如果您使用 IE8，则打开 javascript 调试器（我按

F12

来获取它），如果使用 Firefox，则使用 Firebug 插件，这是我的首选方法。

在每个

elem = ...

之后放置一个断点并确保您获得了所需的项目。

我预计第一个

alert

可能是问题所在，因为ajax调用的结果可能会被缓存。 您需要确保您的浏览器不会缓存响应，但是，我发现最好将响应中的标头设置为

no-cache

，而且还要在我的请求中传递当前秒数+毫秒，尽管我从来没有检查该值，但是，通过将其放在那里，它不太可能被重复，因此不会从浏览器缓存中提取。

如果您使用

getElementsByTagName

的事实不正确，因为您没有检查是否返回任何元素，则当您尝试获取第一个元素时可能会收到错误。当列表中至少应该有一个时，您应该进行健全性检查，并确保列表不为空。 如果您抛出异常，Firebug 将在控制台上显示错误，这可以解释为什么您的更新未显示。

如果你不想使用jQuery，如果你可以设置元素的id，那么最好使用

document.getElementById

。

Answer 2

我不能确定，因为我不知道你遇到了什么错误，但也许你想在打开连接之后设置

http.onreadystatechange = statechange_rate;

，但在之前你调用发送。

Answer 3

首先我应该问，您是否在 PHP 响应中发送 XML 内容类型标头（例如“text/xml”）？ 如果不是，

responseXML

属性将不包含任何内容。

我认为这段代码应该是这样的：-

函数投票(id, rating) { var http = getXHR() var fullurl = 'ajax.php?id=' + id + '& rating=' + rating;

如果（http） { http.open("GET", fullurl, true); http.onreadystatechange = statechange_rate; http.send(null); }

函数statechange_rate() { if (http.readyState == 4) { var xmlObj = http.responseXML; var 结果 = http.responseXML.documentElement; var html = result.firstChild.data; var id = result.getAttribute("id"); var votes = result.getAttribute("votes"); var 评级 = result.getAttribute("评级");

elem = document.getElementById('output_' + id);

elem.innerHTML = "<br />" + html;
window.setTimeout(function() {elem.innerHTML = '';}, 5000);
if (votes != -1)
{
 document.getElementById('rating_' + id).innerHTML = rating;
 document.getElementById('votes_' + id).innerHTML = votes;
}

} } }

函数 getXHR() { if (window.XMLHttpRequest) { http = 新的 XMLHttpRequest(); } 否则如果（窗口.ActiveXObject） { http = new ActiveXObject("Microsoft.XMLHTTP"); } }

备注：-

• 在调用 send 之前将回调分配给 onreadystatechanged
• 我怀疑“results”元素是 XML 的根元素。
• 使用 HTML 元素上的 id 属性和 getElementById 来查找它们。
• 从 If 中提取重复代码