Question

我正在尝试使用AJAX重新创建Gmail“明星”最喜欢的按钮。不幸的是，我所拥有的不起作用，我无法解决原因。

我的HMTL中有以下内容：

<img id="item_1" src="/_images/star_off.gif" onclick="updateStar(this.id)" />
<img id="item_2" src="/_images/star_off.gif" onclick="updateStar(this.id)" />

我在一个单独的文件中使用以下Javascript：

function updateStar(id) {
    var imgsrc = (document.getElementById(id).src == "/_images/star_off.gif") ? "/_images/star_on.gif" : "/_images/star_off.gif";
    var sendId = id.split('_')[1];
    var sendStar = (imgsrc == "/_images/star_off.gif") ? false : true;
    var objXml = new XMLHttpRequest();
    var datasource = "favourite.php";
    var params = "id=" + sendId + "&star=" + sendStar;
    objXml.open("GET", datasource + "?" + params, true);
    objXml.onreadystatechange=function() {
        if ((objXml.readyState==4) && (objXml.status==200)) {
            alert('status changed.');
        }
    }
    objXml.send(null);
}

脚本favourite.php设置将id插入到收藏夹数据库表中（如果star == false则将其删除）。

我看不出这里有什么问题，但它不起作用。我也尝试了jQuery: Gmail Star?上的建议，但他们也不会工作。有什么建议吗？

Answer 1

虽然很难看出问题出在哪里，如果你没有确切地告诉它是什么它是不起作用的（例如，从未进行过XMLHttpRequest调用，但是没有达到最终的readyState或状态），我看到你的代码中存在一些缺陷。例如，看看

var imgsrc = (document.getElementById(id).src == "/_images/star_off.gif") ? "/_images/star_on.gif" : "/_images/star_off.gif";

在这里，您要测试星形的当前状态取决于图像的src属性。快速测试显示，在Firefox 3.6.8中，src属性包含图像源的完整URL，包括协议，域和完整路径。所以，在我的测试中，条件

(document.getElementById(id).src == "/_images/star_off.gif")

将始终评估为false，始终将imgsrc设置为"/_images/star_off.gif"（因此此功能永远不会打开星标）。

几行后，您再次测试完全相同的条件：

var sendStar = (imgsrc == "/_images/star_off.gif") ? false : true;

尽量避免这种冗余（例如，从头开始使用布尔值）;这可能会减少引入错误的机会。而且，在这种情况下，根本不需要条件运算符（? :）;这一行可以改写为

var sendStar = (imgsrc != "/_images/star_off.gif");

但是，正如我所说，尽量避免使用这种字符串比较来检查这些星星的状态。

恕我直言，要么使用两个独立的功能来打开和关闭你的星星，所以根本不需要测试它，或者使用参数发送状态，例如

。

<img id="item_1" src="/_images/star_off.gif" onclick="updateStar(this.id, true)" />

true将打开明星。

当然，在JavaScript中绑定一个事件更简洁（甚至只使用JavaScript显示该星，所以当JS不可用时它不会显示）。

Answer 2

我会检查Xml Http请求是否正在触发，如果是，那么它会保持什么值。如果您有Safari浏览器，则可以使用Web Inspector查看此内容。在Web Inspector下，转到Resources / XHR，然后单击与您在ajax调用中设置的路径对应的url路径。然后单击“内容”选项卡并查看其中的输出。如果它是空白的，那么你知道ajax调用失败了。如果它有值，请确保它是您期望的值。

使用AJAX创建Gmail样式的明星收藏图标

2 个答案: