ajax - Jquery Ajax - 响应应该替换 html

Question

我刚开始使用 Ajax，但遇到了一些问题。我有一个页面，其中包含一些视频缩略图的列表，当您将鼠标悬停在它们上时，会显示一个“我不喜欢这个”图标。这样就完成了。现在我遇到的问题是:

当您点击该图标时，视频标题、缩略图和信息应该消失，并且必须显示另一个视频。

这是我的 Ajax 代码

function ThumbsDown(id,sort,page) {
$.ajax({
    url: "/change/videos/"+id+"/thumbsdown/",
    type: "POST",
    data: {
        "sort": sort?sort:"",
        "page": page?page:""
    },
    complete: function(result) {
         // Instead of calling the div name, I need to be able to target it with $(this) and .parent() to make sure only 1 video change, but for now I only want the response to replace the video
         $("#content .videoList ul li.videoBox").html(result);             
    }
});
}

请求正在运行，我收到了(200 OK)响应。它返回我新视频的 HTML 代码块。

问题是，当我单击图标时，div 中的所有 html 都消失了。我有一个空标签，所以我猜它被解释为“空”。但在我的 firebug .Net 选项卡中，我可以清楚地看到有一个响应。

请问有什么帮助吗？ 已经修复，谢谢

** 编辑 **

现在我在使用$(this)和parents()来定位特定的div时遇到问题。有人可以帮忙吗？

我想定位 li #videoBox

<li class="videoBox recommended">
   <div class="spacer" style="display: block;"></div>
   <div class="features">
      <div>
         <a class="dislike_black" title="I dislike this" onclick="ThumbsDown(30835, 'relevance', '1');"></a>
      </div>
    ...

我尝试过这个，但它不起作用。

    success: function(data) {
        $("#content .videoList ul li.videoBox").html(data); // this IS WORKING, but replacing ALL the thumbs
        $(this).parents("li.videoBox").html(data); // THIS IS NOT

我做错了什么？

Answer 1

您遇到的问题是您正在使用“完整”回调函数。这可能会产生误导，但该回调应该在成功或失败后调用。它更多的是用于清理，并且不会像您期望的那样收到响应数据。基本上，您需要做的就是将“完成”更改为“成功”，您应该会收到预期的结果。

不过，我个人不建议使用Ajax功能，因为看起来完全没有必要。 Ajax 功能主要用于复杂事务，而看起来您有一个相当简单的功能。我的建议是使用 jQuery 提供的“快捷方式”功能，如下所示:

$.post(`/change/videos/${id}/thumbsdown/`, {sort:'', page:''}, function(result){
    // Instead of calling the div name, I need to be able to target it
    // with $(this) and .parent() to make sure only 1 video change,
    // but for now I only want the response to replace the video

     $('#content .videoList ul li.videoBox').html(result);
}, 'html');