php - 通过 Ajax 在单击的按钮下显示 PHP 输出 - 不起作用

Question

我试图通过 Ajax 在单击的按钮下显示 PHP 输出，但我的代码无法正常工作。

输出.php

<?php
    if(isset($_POST['click_me'])){
        echo "<p>Something</p>";
    }
?>

HTML

<button class="same-class" name = "click_me" type = "button">Button 1</button>
<p> To display below me</p>

<button class="same-class" type = "button">Button 2</button>
<p> To display below me too</p>

Jquery

$(function(){
    $('.same-class').click(function(){
        $(this).next('p').append('Hello'); //Works
        $.ajax({
            url: 'output.php',
            type: 'POST',
            data: {click_me: 1},
            success:function(response){
                $(this).next('p').append(response); //Does not work--does not do anything, does not produce errors either.

                console.log(response); // works
                $('same-class').append(response); //works but all buttons get appended
                alert(response); //works
            }

        });

    });
});

看来 success: function(response){} 中 $(this) 的位置是问题的原因。该代码也不会产生错误。我对 SO 进行了大量搜索，其他结果表明这应该可行。现在已经两个多小时了，我不明白为什么它不起作用。

Answer 1

你的猜测是正确的。回调函数中的 $(this) 指的是您传入的对象。因此，您需要在进行 ajax 调用之前保存对按钮的引用。将您的 javascript 更新为以下内容:

$(function(){
    $('.same-class').click(function(){
        $(this).next('p').append('Hello'); //Works
        //save a reference to the button clicked.
        var btn = $(this);

        $.ajax({
            url: 'output.php',
            type: 'POST',
            data: {click_me: 1},
            success:function(response){
               //use the button reference from above.
               btn.next('p').append(response); //Does not work--does not do anything, does not produce errors either.

                console.log(response); // works
                $('same-class').append(response); //works but all buttons get appended
                alert(response); //works
            }

        });

    });
});