php - Ajax执行php而不刷新-如何设置变量？

Question

我有一个非常小的 php 脚本，其中有几个按钮，没有表单。当我按下一个按钮时，我希望根据我尝试使用 ajax 发送的 id 执行一个小的 php 脚本。

这些按钮看起来像这样:

<button onclick="deleteTask()" class="task" data-id="1">Task 1</button>
<button onclick="deleteTask()" class="task" data-id="2">Task 3</button>
<button onclick="deleteTask()" class="task" data-id="3">Task 4</button>
...

我有这个ajax功能:

function deleteTask() {
    var id=$(this).data("id");
    var dataString='id='+ id;

    $.ajax({
        type: "POST",
        url: "test.php",
        data: dataString,
        cache: false,
        success:function(html) {
            alert(html);
        }
    });
}

执行的 PHP 脚本只是一个测试:

$id = $_POST['id'];
echo "Response: " . $id;

结果是警报框的响应为:

Response: undefined

我想要的是获取作为响应按下的按钮的数据 ID。如果我按 data-id="1" 按钮 1，我希望得到 "1" 响应。

Answer 1

正如 @Andrew 正确所说，$(this) 是 window 对象。

因此，为了能够在函数内引用 button 对象，您必须将其作为函数参数传递，例如作为每个函数调用中的 this:

<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>

<script type="text/javascript">
    function deleteTask(button) {
        var id = $(button).data("id");

        $.ajax({
            type: "POST",
            url: "test.php",
            data: {
                'id': id
            },
            cache: false,
            success: function (html) {
                alert(html);
            }
        });
    }
</script>

<button type="button" id="button1" name="button1" onclick="deleteTask(this);" class="task" data-id="1">Task 1</button>
<button type="button" id="button2" name="button2" onclick="deleteTask(this);" class="task" data-id="2">Task 3</button>
<button type="button" id="button3" name="button3" onclick="deleteTask(this);" class="task" data-id="3">Task 4</button>