Ajax Success 调用后无法更新 span 标签

Posted 2023-05-09

【中文标题】Ajax Success 调用后无法更新 span 标签

【英文标题】：Trouble in updating span tag after Ajax Success call

【发布时间】：2015-10-20 01:56:50

【问题描述】：

我在更新 html 文件中的 span 标签时遇到问题。我正在从服务器获取 JSON 对象，它也在 console.log 中显示。但是当我尝试在 AJAX:Success 中的 span 标签上更新它时，它不起作用。如果我在成功标签之外调用同一行，它确实在那里工作。

AJAX.JS

$('a.up_vote').click(function(e) 
          e.preventDefault();

          $(this).siblings("span").css( "background-color", "green" );

          $.ajax(
            url: $(this).attr('href'),
            type :'get' ,
            success : function (data)
              $(this).find("span").css( "background-color", "red" ); 
              $(this).siblings('span').html(data.count);
              $(this).siblings("span").css( "background-color", "red" );
            ,
            failure : function (data)
              alert('failure') ; 
            
          ) ;  // ajax call 

       ); // upvote link call

HTML

   <div class ='up' style="float:left">
         <a href='% url 'upvote-detail' post.id %' class='up_vote'>Up vote</a>
         <span>  post.upvote  </span> 
   </div>

【问题讨论】：

$(this) 里面的成功不是你想的那样……试试打印吧..

你也在使用 Angular JS 吗？

@Neron 我正在使用 DJANGO

请更新此线程，接受答案或通过评论或编辑提供详细信息，甚至自行回答为什么它不回答您的问题。

【参考方案1】：

问题是你对 $(this) 的使用

Using the context of the 'this' keyword with jQuery

https://remysharp.com/2007/04/12/jquerys-this-demystified

一种简单的方法是存储对 $(this) 的引用，然后再使用它。

例如：

$('a.up_vote').click(function(e) 
      e.preventDefault();
      window.alert("hello");
      console.log("hello there");

      var $that = $(this);

      $that.siblings("span").css( "background-color", "green" );

      $.ajax(
        url: $that.attr('href'),
        type :'get' ,
        success : function (data)
          // alert('success');
          console.log('hello from success ajax')
          console.log(data.count); 
          $that.find("span").css( "background-color", "red" ); 
          $that.siblings('span').html(data.count);
          $that.siblings("span").css( "background-color", "red" );
          // $('#upvote_count').html(data.count);
          console.log('siblings passed')
        ,
        failure : function (data)
          alert('failure') ; 
        
      ) ;  // ajax call 

   ); // upvote link call

$that 只是一个以 $ 开头的 var 名称，不是特定于 jquery 本身，而是存储 jquery 对象的变量的有用习惯（包括 $() 包装的 DOM 元素，因为它们也是 jquery 对象）

$that = $(this) 是一个有用的模式，可以使用任何你想要的变量名。

此外，当某些东西不起作用时，始终建议使用简单的控制台调用来检查关键变量

console.log('debug',$(this)); 

您只需按 F12 并转到控制台选项卡（或谷歌您的浏览器名称 + 开发控制台，如果没有任何反应）并查看那里打印的内容（甚至使用断点或其他调试方法，请参阅链接）

调试链接

Chrome 开发者工具：https://developer.chrome.com/devtools

在 Chrome 中调试 JS：https://developer.chrome.com/devtools/docs/javascript-debugging

【参考方案2】：

成功回调中的$(this) 不再引用单击的项目。

您必须直接引用它或使用临时变量，例如：

var clickedItem = $(this); // before ajax call

然后在成功回调里面尝试

$(clickedItem) 而不是$(this)

我希望这对你有用；请告诉我。

Here你有一个很好的解释'this'关键字在回调中的使用。

【参考方案3】：

$('a.up_vote').click(function (e) 
    e.preventDefault();

    $(this).siblings("span").css("background-color", "green");

    $.ajax(
        url: $(this).attr('href'),
        type: 'get',
        success: function (data) 
            $('a.up_vote').siblings("span").css("background-color", "red");
            $('a.up_vote').siblings('span').html(data.count);
        ,
        failure: function (data) 
            alert('failure');
        
    );  // ajax call 

); // upvote link call

试试这个。