Jquery ajax不执行成功答案

【问题标题】：Jquery ajax not execute successJquery ajax不执行成功
【发布时间】：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，点击所有数据成功插入数据库后。

标签： javascript jquery html ajax dom

【解决方案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");

希望这会有所帮助。

【讨论】：