如何在同一文件内通过JavaScript事件监听器调用PHP函数

我明白你想在同一个文件里，通过前端事件监听器触发PHP函数，不用单独开一个PHP文件对吧？之前你参考的例子是调用外部的pageTwo.php，其实只要简单调整一下，就能在当前文件里实现这个需求，我给你一步步说明：

核心调整思路 #

1. 修改AJAX的请求地址：把原来指向外部文件的URL改成当前文件（可以直接留空，或者用window.location.href）。
2. PHP逻辑前置处理：在输出HTML内容之前，先检查是否是AJAX请求并处理对应的函数，处理完成后直接退出，避免把整个页面HTML返回给前端。

完整代码示例 #

<?php
// 先处理AJAX请求，放在HTML输出之前
if(isset($_POST['action']) && $_POST['action'] === 'test') {
    // 这里写你要执行的PHP函数逻辑，比如：
    function testFunction() {
        return "PHP函数被成功触发！";
    }
    // 调用函数并返回结果
    echo testFunction();
    // 处理完直接退出，不要输出后面的HTML
    exit;
}
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>同一文件AJAX调用PHP函数</title>
    <!-- 必须引入jQuery，否则$.ajax无法使用 -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <!-- 你的前端控件 -->
    <select id="categoryone">
        <option value="">请选择分类</option>
        <option value="1">分类1</option>
        <option value="2">分类2</option>
    </select>

    <script>
        // 事件监听器触发AJAX请求
        document.getElementById("categoryone").addEventListener("change", function(event) { 
            $.ajax({ 
                url: '', // 指向当前文件，留空即可
                data: {action: 'test'}, // 传递action参数给PHP
                type: 'post', 
                success: function(output) { 
                    alert(output); // 弹出PHP返回的结果
                },
                error: function() {
                    alert("请求出错啦！");
                }
            }); 
        });
    </script>
</body>
</html>

关键注意事项 #

• PHP逻辑要前置：一定要把处理AJAX请求的PHP代码放在HTML输出之前，这样当AJAX请求过来时，PHP会先执行逻辑并返回结果，然后exit终止脚本，不会把后面的HTML页面内容也返回给前端。
• 严谨判断AJAX请求（可选）：如果想要更严谨，可以在PHP里加上AJAX请求的判断：

  if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest' && isset($_POST['action']) && $_POST['action'] === 'test') {
      // 处理逻辑
  }
  

  这样可以避免用户直接通过POST请求访问页面时触发函数。
• 必须引入jQuery：你的代码里使用了$.ajax方法，所以页面中一定要引入jQuery库，否则会出现$ is not defined的错误。

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