Ubuntu系统Apache服务器下CGI搭配Ajax实现无刷新提交不生效问题

1 前端核心错误：jQuery加载顺序颠倒 #

你的自定义JS代码中使用了jQuery的$符号，但引入jQuery库的代码写在了自定义脚本的后面，浏览器执行到自定义脚本时$还未定义，事件绑定直接失效，控制台会抛出$ is not defined的错误。
解决方法：调整脚本加载顺序，先引入jQuery，再编写依赖jQuery的自定义代码，调整后的前端代码示例如下：

<!DOCTYPE html>
<html>
<body>
    <!-- 先引入jQuery库 -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <!-- 再写自定义业务脚本 -->
    <script>
        $('form.ajax').on('submit', function(e){
            // 阻止默认表单跳转刷新行为，比return false兼容性更好
            e.preventDefault();
            alert("提交事件拦截成功");
            // 补充Ajax提交逻辑，和后端CGI交互
            $.ajax({
                // 替换为你的后端CGI接口地址
                url: '/cgi-bin/backend.py',
                type: 'post',
                // 序列化表单所有数据
                data: $(this).serialize(),
                success: function(res) {
                    alert("提交成功，服务端返回内容：" + res);
                },
                error: function() {
                    alert("提交失败，请检查后端接口配置");
                }
            });
        });
    </script>

    <form method="post" class="ajax">
        <input type="text" name="input_text" placeholder="输入测试内容">
        <input type="submit" value="Submission">
    </form>
</body>
</html>

2 后端CGI配置检查项 #

如果调整前端后请求还是无法正常响应，请依次检查以下配置：

• 给CGI文件添加执行权限：chmod +x 你的CGI文件名.py
• 开启Apache的CGI模块，执行命令后重启Apache：

  sudo a2enmod cgi
  sudo systemctl restart apache2
  

• 默认Ubuntu Apache的CGI文件需要存放在/usr/lib/cgi-bin/目录下，访问路径为http://你的地址/cgi-bin/文件名.py，如果要放在其他目录，需要在对应虚拟主机配置中添加如下规则：

  Options +ExecCGI
  AddHandler cgi-script .py
  

• 确认Python版本匹配：Ubuntu 20.04及以上版本默认没有预装Python2，建议将CGI代码升级为Python3版本，避免执行报错，支持接收POST参数的Python3 CGI示例如下：

  #!/usr/bin/env python3
  import cgi
  # 开启调试模式，错误会直接输出到页面方便排查
  import cgitb
  cgitb.enable()
  
  # 必须输出空行分隔响应头和响应体
  print("Content-Type: text/html; charset=utf-8\n\n")
  
  form = cgi.FieldStorage()
  input_content = form.getvalue('input_text', '未收到输入内容')
  print(f"服务端已接收到内容：{input_content}")
  

• 读取本地html文件时建议使用绝对路径，且用完文件及时关闭，优化后的原CGI逻辑示例：

  #!/usr/bin/env python3
  print("Content-Type: text/html; charset=utf-8\n\n")
  # 替换为ajax_input.html的绝对路径
  with open("/var/www/html/ajax_input.html", "r", encoding="utf-8") as f:
      print(f.read())
  

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