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;，但是before你打电话给发送。

Answer 3

首先我应该问一下，您是否正在使用PHP的响应发送XML Content类型标题，例如“text / xml”？如果不是，responseXML属性将不包含任何内容。

以下是我认为此代码应如下所示： -

功能投票（id，rating） { var http = getXHR（） var fullurl ='ajax.php？id ='+ id +'＆amp; rating ='+ rating;

if（http） { http.open（“GET”，fullurl，true）; http.onreadystatechange = statechange_rate; http.send（NULL）; }

function statechange_rate（） { if（http.readyState == 4） { var xmlObj = http.responseXML; var result = http.responseXML.documentElement; var html = result.firstChild.data; var id = result.getAttribute（“id”）; var votes = result.getAttribute（“votes”）; var rating = result.getAttribute（“rating”）;

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 = new XMLHttpRequest（）; } else if（window.ActiveXObject） { http = new ActiveXObject（“Microsoft.XMLHTTP”）; } }

注： -

在致电发送
我怀疑“results”元素是XML的根元素。
在HTML元素和getElementById上使用id属性来查找它们。
从If

JavaScript问题？

3 个答案: