Jquery ajax不执行成功

Posted 2023-05-09

【中文标题】Jquery ajax不执行成功

【英文标题】：Jquery ajax not execute success

【发布时间】：2016-04-20 04:26:50

【问题描述】：

我通过 ajax 发送请求以在数据库中插入数据。成功提交后我的按钮消息没有改变。在按下我触发消息Please wait... 时触发成功设置新的html 值Done。 db 中的记录已成功创建，但 Done 的按钮文本未更改。

我的脚本：

var Friend = 

    // Add new friend
    add: function() 
        var btn = $(".btn-add-friend");

        btn.click(function() 

            $(this).html("Please wait...");

            $.ajax(
                type: "post",
                url: baseurl + "/FriendRequest/send",
                data: 
                    friend: $(this).data('friend')
                ,

                success: function(xhr, status) 
                    $(this).html("Done"); // Not wortk

                    alert("done"); // <-- Work 
                ,
                error: function(response, s, e) 
                    alert(response.responseText);
                ,
                complete: function () 
                     //. the some from success
                
            );
        );
      ,

    // Initialise
    init: function() 
        Friend.add();
    
;

HTML：

<button type="button" id="item-<?=$person->account_id;?>" class="btn  btn-xs btn-add-friend has-spinner" data-friend="<?= $person->account_id;?>"><i class="fa fa-plus-circle"></i> Add Friend</button>

当我单击按钮时，文本已更改为 Please wait..，但成功后未更改为 Done，并且警报成功执行。

点击后看起来它不是 DOM 的一部分！我也尝试使用on() 得到一些结果。

【问题讨论】：

在将变量 baseurl 传递给 url 之前检查它是否具有某些值。

baseurl 不是问题，它只是控制器的url，点击所有数据成功插入数据库后。

【参考方案1】：

this 在 ajax 函数回调中是 .... ajax 调用，而不是被点击的元素。 你必须用它替换它

add: function() 
    var btn = $(".btn-add-friend");

    btn.click(function() 

        var self = $(this);

        self.html("Please wait...");

        $.ajax(
            type: "post",
            url: baseurl + "/FriendRequest/send",
            data: 
                friend: self.data('friend')
            ,
            success: function(xhr, status) 
                self.html("Done");
            ,

【讨论】：

我正在从数据库中循环好友列表，并且有 100 个用户带有一些按钮。如果我设置btn.html("done") 我将所有按钮更改为完成:(为此我只需要指向一个按钮

您需要一个变量来保存this 值，已编辑

对....谢谢现在的工作。所以下次我需要定义变量时，女巫将持有this，谢谢。

每个函数一般都有自己的this值，所以当click函数里面的this是被点击的元素时，和ajax函数一样，success函数里面的this是 ajax 调用，而不是元素。

是的，我现在明白了，你为我节省了很多时间。再次感谢

【参考方案2】：

要使用this，您需要附加属性。用url添加以下内容

context:this

所以，更新后的代码将是

$.ajax(
            type: "post",
            url: baseurl + "/FriendRequest/send",
            context:this,
            data: 
                friend: $(this).data('friend')
            ,

            success: function(xhr, status) 
                $(this).html("Done"); // Will work

                alert("done"); // <-- Work 
            ,
            error: function(response, s, e) 
                alert(response.responseText);
            ,
            complete: function () 
                 //. the some from success
            
        );

【参考方案3】：

在回调内部，this 指的是 Ajax 调用的 jqXHR 对象，而不是元素。所以尝试在ajax请求之前将它分配给一个变量，然后在成功函数中使用这个变量：

//Before ajax request
var _this = $(this);

//Inside success function
_this.html("Done");

希望这会有所帮助。