如何在JavaScript中运行PHP代码？点击按钮加载PHP文件内容

你的问题场景 #

你现在有这样一段代码，希望点击按钮时加载存储在PHP文件里的内容：

let lvlcount = 0; 
function loadmore(){ 
  if (lvlcount == 0){ 
    document.getElementById("d").innerHTML = lvlcount; 
    lvlcount =+ 1; 
  }else if (lvlcount == 1){ 
    document.getElementById("d").innerHTML = '<?php require("./parts/levels/lvl-456.php"); ?>'; 
    lvlcount += 2; 
  } 
}

但你发现这样写没法达到预期效果，想知道怎么正确实现点击加载PHP代码的功能。

先搞懂核心逻辑：为啥原代码不行？ #

首先得掰明白一个关键点：PHP是服务器端语言，JavaScript是客户端语言。当浏览器加载你的页面时，PHP代码会先在服务器上执行完，生成对应的HTML/文本后再发送给浏览器；而JS是在用户的浏览器里运行的，它根本没法直接“运行”PHP代码——你能做的是，通过JS向服务器发个请求，让服务器执行目标PHP文件，把执行后的结果返回给JS，再把结果插入到页面里。

你的原代码里，'<?php require("./parts/levels/lvl-456.php"); ?>'这段内容，只有在页面第一次加载时会被PHP解析执行（前提是你的页面文件是.php后缀），之后当JS执行这段代码时，它已经变成一个普通字符串了，不会再触发PHP的解析，所以自然达不到你要的“点击时加载PHP内容”的效果。

正确实现：用Fetch API异步请求PHP文件 #

我们可以用现代的Fetch API来实现点击按钮时请求PHP文件，获取它的输出并插入页面。修改你的代码如下：

let lvlcount = 0; 
function loadmore(){ 
  if (lvlcount == 0){ 
    document.getElementById("d").innerHTML = lvlcount; 
    lvlcount += 1; // 这里你原来写的是lvlcount =+1，应该是+=哦，笔误要改
  }else if (lvlcount == 1){ 
    // 发起请求获取PHP文件的执行结果
    fetch('./parts/levels/lvl-456.php')
      .then(response => {
        if (!response.ok) {
          throw new Error('请求失败，可能是文件不存在或服务器出错');
        }
        return response.text(); // 获取PHP返回的HTML文本内容
      })
      .then(htmlContent => {
        document.getElementById("d").innerHTML = htmlContent; // 把内容插入到页面元素里
        lvlcount += 2;
      })
      .catch(error => {
        console.error('加载过程出错了:', error);
        document.getElementById("d").innerHTML = '加载失败，请稍后重试';
      });
  } 
}

几个要注意的细节 #

• 确保你的服务器支持PHP，并且页面所在的文件如果包含PHP代码的话，后缀得是.php（比如index.php）。
• 检查./parts/levels/lvl-456.php这个文件路径是否正确，要相对于当前页面的位置，不然会出现404错误。
• 如果你的PHP文件需要输出动态内容（比如从数据库取数据、做计算），直接正常写PHP逻辑就行，服务器会先执行这些逻辑，再把最终的结果返回给JS。

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