jquery在ajax请求中丢失了$(this）值

jquery losing value of $(this) on ajax request

本文关键字：this ajax 请求 jquery      更新时间：2023-09-26

嗨，我正在使用jquery向数据库发出ajax请求，以便从数据库中添加和删除收藏夹。这很好，但我想替换锚链接中的href的一部分，这样用户就可以在需要时再次添加/删除，而无需刷新页面，例如链接就是这样构建的http://article.local/favourite/delete/uniqueid因此，我需要将"删除"替换为"添加"，反之亦然。然而，我不能使用类名，否则这将应用于所有类，而不是当时单击的类。

$( ".remove-favourite" ).click(function(e) {
    e.preventDefault();
    var favform = $(this).parent('.fav-form-contents');
    $(favform).append("<img src='/images/loading.gif' class='form-loader' class='loading-icon'/>");                    
 $.ajax({
         type     : "POST",
         cache    : false,
         url      : $(this).attr('href'),
         data     : $(this).serialize(),
        success  : function(data) {
             $('.loading-icon').hide();
            $(this).attr('href').replace(/delete/, 'add');
            $(this).removeClass('remove-favourite').addClass('add-favourite');
        }
      })
}); // end click function

然而，我得到的错误消息如下：

Uncaught TypeError: Cannot read property 'replace' of undefined

这表明它已经丢失了当前项目，有没有关于我做错了什么的想法？？

您需要将$(this)保留在一个变量中，以便像一样进行回调

var $link = $(this);
$.ajax({
         type     : "POST",
         cache    : false,
         url      : $(this).attr('href'),
         data     : $(this).serialize(),
        success  : function(data) {
             $('.loading-icon').hide();
            $link.attr('href').replace(/delete/, 'add');
            $link.removeClass('remove-favourite').addClass('add-favourite');
        }
  })

this本身将发生更改，因为$.ajax中success回调的执行上下文与调用$.ajax时不同。

将this作为函数的全局均值

类似var _this = $(this)在ajax suuceess 中的使用

ajax内部的this与xhr对象相关。

使用ajax、的context选项

该对象将是所有与Ajax相关的回调的上下文。默认情况下，上下文是一个表示Ajax设置的对象

$.ajax({
     context:this,
     ....
相关文章：