javascript - Ajax成功行动

当某人单击“喜欢”按钮时，我正在数据库中检查该人是否已喜欢该照片。我正在使用ajax进行检查。

当照片已经被喜欢时，成功消息会显示“已经喜欢”，否则为空字符串。

问题是增加“当前喜欢”是行不通的。我尝试使用alert来查看数字，它始终显示第一行中的第一个数字，而不会被currentLikes++增加。

实际发生了什么？我全局定义了变量。

var currentLikes = $(this).next('span').text();

$.ajax({
    type: "POST",
    url: "/save_like",
    success: function(msg){
        addLike(msg);
    }
});

function addLike(msg){
    if(msg !== 'already liked'){
        currentLikes++;
    }
alert(currentLikes);
$(this).next('span').html(currentLikes);
}

最佳答案

这些行：alert(currentLikes);和$(this).next('span').html(currentLikes);不在AJAX代码内，它们将在AJAX调用完成之前执行。将该代码移到addLike函数中以查看正确的值。

另外，将currentLikes = currentLikes++代码更改为currentLikes++，因为++在表达式的末尾，因此它是“后递增”运算符，这意味着该值直到当前语句之后才增加完成评估。如果您编写了currentLikes = ++currentLikes并使用了“ pre-increment”运算符，则在对表达式的其余部分求值之前，该值会增加，并且可以正常工作，但是只是说currentLikes++（不重新分配回currenLikes是更好--增加值并将其存储在当前变量中。

另外，this不会在回调中引用您想要它的元素，因为this在JavaScript中是易失的-它的对象绑定会根据包含它的代码的调用方式而变化，因此您需要更新将提供正确的参考。如果保存对要使用的元素的引用（而不是该元素的属性），则可以稍后使用变量引用该元素。

另外，您会从span中获得原始的计数，并且该计数将作为字符串返回给您，您应该在对其进行数学运算之前将其转换为数字。

最后，确认msg实际上没有返回'already liked' EXACTLY AS YOU HAVE IT IN QUOTES. Remember, strings are literals and they are case-sensitive. If there's even an extra space in msg`，您的代码将无法正常工作。

// Store a reference to the likes element (not any property value of it)
var currentLikeElement = $(this).next('span');

// Now, get the old like count out of the DOM and convert to a number
var likeCount = parseInt(currentLikeElement.text(), 10);

alert(likeCount);

$.ajax({
    type: "POST",
    url: "/save_like",
    success: function(msg){
        // Let's make sure msg is cleaned up and ready for comparison
        // by trimming any leading or trailing spaces off of it and forcing
        // it to all lower-case (because we'll be comparing it to lower-
        // case later).
        msg = msg.trim().toLowerCase();
        addLike(msg);
    }
});

function addLike(msg){
  console.log(msg);  // <--  What does this return?
  if(msg !== 'already liked'){
        likeCount++;
  }
  alert(likeCount);

  // Inject the new like count into the stored object reference:
  currentLikeElement.text(likeCount);
}