页面加载时JS send()函数不执行及Ajax连接拒绝问题排查

咱们来逐个拆解你遇到的几个核心问题，一步步解决：

1. 页面加载时调用send()无效的原因 #

看你的HTML脚本引入顺序就明白了：

• <head>里先加载了ajax.js（里面的send()依赖jQuery的$.ajax）
• 直到<body>里才引入jQuery库

这就导致ajax.js加载执行时，jQuery还没就绪，$.ajax是未定义状态，页面加载时调用send()自然会报错失败；而点击按钮时页面已经完全加载，jQuery也准备好了，所以函数能正常运行。

解决方法 #

两种方案任选其一：

• 调整脚本顺序：把jQuery移到ajax.js之前引入，比如放在<head>里：

<head>
<meta charset="utf-8" />
<title>Génération</title>
<link rel="stylesheet" media="screen" title="super style" href="./styles/feuille.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="./script/ajax.js"></script>
</head>

• DOM就绪后调用：把send()的调用包裹在jQuery的DOM就绪事件里，确保jQuery加载完成：

<script>
$(document).ready(function() {
  send();
  alert($("#image").attr('src'));
});
</script>

2. POST http://localhost:3000/index/gen/ net::ERR_CONNECTION_REFUSED错误 #

这个错误说明你的Node.js服务器没有正常启动，或者请求的端口/路由不匹配，重点检查这几点：

• 服务器状态：确认Node.js服务已经在localhost:3000上运行，没有崩溃。
• Node.js代码语法错误：你的代码里有两处明显错误，会导致服务器启动失败：
  • const ls = spawn('./generateur/minigen.py', req.session.donnees = '' 缺少右括号，且spawn的第二个参数应该是数组，修正为const ls = spawn('./generateur/minigen.py', []);
  • 监听stderr时用了'datas'，正确事件名是'data'，改成ls.stderr.on('data', (datas) => { ... })
• 路由匹配：前端请求的URL可以写成'/index/gen/'（带开头斜杠），避免相对路径导致的路由不匹配问题。

3. jQuery滑块数据未初始化问题 #

这个问题和第一个问题本质一样：滑块的初始化代码大概率是在jQuery加载之前执行了，导致无法正常初始化。解决方法：

• 确保滑块初始化代码在jQuery引入之后执行
• 把初始化代码也放在$(document).ready()回调里，等DOM和jQuery都就绪后再运行

修正后的关键代码示例 #

调整后的HTML脚本部分

<head>
<meta charset="utf-8" />
<title>Génération</title>
<link rel="stylesheet" media="screen" title="super style" href="./styles/feuille.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="./script/ajax.js"></script>
</head>
<body>
<img src="images/map.jpg" class="superbg" alt="Carte du monde"/>
<div id="main">
<header>
<div id="titre">
<h1>Generator</h1>
</div>
</header>
<img id="image" src="" alt="Map">
<script>
$(document).ready(function() {
  send();
  // 这里添加滑块初始化代码，比如：
  // $('#your-slider-id').slider({ ... });
});
</script>
<footer>
Copyright CLEBS 2017, tous droits réservés.
</footer>
</body>

修正后的Node.js代码片段

app.post('/index/gen/', urlencodedParser, function (req, res) {
  const { spawn } = require('child_process');
  // 修正spawn语法错误
  const ls = spawn('./generateur/minigen.py', []);
  req.session.donnees = ''; // 初始化session数据
  ls.stdout.on('data', (data) => {
    req.session.donnees += data.toString();
  });
  // 修正stderr事件名
  ls.stderr.on('data', (datas) => {
    console.log("Erreur" + `stderr: ${datas}`);
  });
  var options = {
    mode: 'JSON',
    pythonOptions: ['-u'],
    scriptPath: './generateur',
    args: ["Some data useless for my question"]
  };
  pythonShell.run('generation.py', options, function (err, results) {
    if (err) throw err;
    res.send(req.session.donnees);
  });
})

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