Node.js+Express环境下jQuery调用php-node渲染PHP文件报错如何解决？

• 你使用的php-node包长期未维护，无法自动将HTTP请求的POST参数传递给PHP解释器，且仅配置了GET /test.php路由，AJAX发起的POST请求无法被正确匹配，导致PHP进程执行异常抛出报错
• 前端JS取值逻辑错误：页面加载时就读取输入框的值，此时输入框为空，点击提交时传递的都是初始空值，即便后端链路通顺也无法拿到正确的用户输入
• 没必要混合Node和PHP处理请求：你已经在Node层完成了MySQL连接配置，直接用Express写接口处理数据存储效率更高，也不会有跨语言调用的各类兼容性问题

1. 清理php-node相关配置 #

删除app.js中的以下配置：

var phpnode = require('php-node')({bin:"C:\\xampp\\php\\php.exe"});
app.engine('php', phpnode);
app.set('view engine', 'php');

删除routes/pages.js中的router.get('/test.php'...)路由配置。

2. 新增书签存储表 #

在MySQL中执行建表语句创建书签表：

CREATE TABLE IF NOT EXISTS bookmarks (
  id INT AUTO_INCREMENT PRIMARY KEY,
  siteName VARCHAR(100) NOT NULL,
  url VARCHAR(255) NOT NULL,
  user VARCHAR(50) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

3. 新增Express POST接口处理提交请求 #

在routes/pages.js中新增以下路由：

// 书签提交接口
router.post('/save-bookmark', function(req, res) {
  const { siteName, URL, user } = req.body;
  // 直接复用已经配置好的db连接写入数据库
  db.query('INSERT INTO bookmarks (siteName, url, user) VALUES (?, ?, ?)', [siteName, URL, user], (err, result) => {
    if (err) return res.status(500).json({status: 'error', msg: '保存失败'});
    res.json({status: 'success', siteName, URL, user});
  });
});

4. 修复前端JS逻辑 #

修改Bookmark.js代码，调整取值时机和请求地址：

const button = document.getElementById('sub_button')

button.addEventListener('click', function(e) {
  // 阻止表单默认提交刷新页面
  e.preventDefault();
  // 点击提交时再读取最新的输入值
  const SiteName = document.getElementById('site_name').value;
  const URL = document.getElementById('url').value;
  const user = document.getElementById('username').value;

  jQuery.ajax({
    type: "POST",
    url: '/save-bookmark',
    data: {
      siteName: SiteName,
      URL: URL,
      user: user,
    },
    cache: false,
    success: function(data) {
      alert('保存成功：' + JSON.stringify(data));
    },
    error: function(xhr, status, error) {
      console.log(xhr, status, error);
    }
  })
});

如果一定要使用原有的PHP链路，可以按以下步骤修复：

1. 在routes/pages.js中新增POST路由，手动传递请求参数给PHP：

router.post('/test.php', function(req, res) {
  res.render('test.php', { ...req.body });
});

2. 按照上文中的方案修改前端JS的取值逻辑，避免传递空值
3. 本地打开命令行执行C:\xampp\php\php.exe 你的test.php文件绝对路径，确认PHP本身运行无报错，路径无中文、特殊字符或空格。

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