如何通过Ajax实现按钮点击调用PHP代码？解决点击无响应问题

首先，你的代码里有几个明显的问题导致按钮点击没反应，咱们一步步来修复：

1. Ajax代码的语法错误（最关键的触发原因） #

你写的Ajax里success和error的写法完全不符合JavaScript语法，这会直接导致浏览器报错，按钮自然没反应（按F12打开控制台就能看到具体错误）。

修正后的Ajax代码应该是这样：

function clickMe() {
    $.ajax({
        url: 'delete.php',
        type: "POST",
        success: function(response) {
            // 这里可以拿到delete.php返回的内容
            alert('请求成功！返回内容：' + response);
        },
        error: function() {
            alert("请求出错了");
        }
    });
}

注意几个关键点：

• success和error后面要跟匿名函数，而不是你写的test() { ... }（这种写法会直接执行test()而非把它作为回调）
• success和error配置项之间要加逗号分隔
• 可以通过response参数接收服务器返回的内容

2. delete.php的问题：函数定义了但未执行 #

你现在的delete.php只是定义了test()函数，但没有调用它，所以当Ajax请求这个文件时，服务器不会输出任何内容。因为Ajax请求的是整个delete.php文件，你需要在文件里主动执行函数，或者根据请求参数触发执行。

修改后的delete.php：

<?php
function test() {
    echo "Hello the World! ";
}
// 直接调用函数，这样请求该文件时就会输出内容
test();
?>

如果后续需要传参数（比如删除指定ID），可以改成这样：

<?php
function test($id) {
    echo "正在删除ID为 {$id} 的内容！";
}
// 接收POST过来的参数，做简单校验
$id = $_POST['id'] ?? '';
if ($id) {
    test($id);
} else {
    echo "缺少必要参数";
}
?>

对应的Ajax也要同步传参数：

function clickMe() {
    $.ajax({
        url: 'delete.php',
        type: "POST",
        data: { id: 123 }, // 这里传递参数
        success: function(response) {
            alert('请求成功！返回内容：' + response);
        },
        error: function() {
            alert("请求出错了");
        }
    });
}

3. 关于require 'delete.php'的说明 #

你在admin.php里引入了delete.php，但这和Ajax请求完全无关！Ajax是客户端（浏览器）单独向delete.php发起的请求，和服务端的require不是一回事，所以这个引入对Ajax请求没有任何作用——如果admin.php的其他逻辑不需要用到delete.php里的函数，完全可以删掉它。

4. 是否需要提供admin.php的完整代码？ #

如果按照上面的方法修改后还是没反应，那可能是其他小问题，比如没引入jQuery库（你用了$，必须在页面里先引入jQuery，比如在你的script标签之前加<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>）。如果排查后还是不行，再考虑提供完整代码，但先把上面的错误修正了，大概率就能解决问题。

最后提醒：遇到前端问题，一定要先打开浏览器开发者工具（F12）查看Console面板的报错信息，这是排查问题最快的方式！

内容的提问来源于stack exchange，提问作者user20118994