如何在XAMPP环境下实现HTML表单传值至Python并返回结果展示？

Got it, let's get this working so your Python script's output shows up in that output div without the page reloading. Since you mentioned using jQuery (from the $(sub).cli... hint), here's a step-by-step solution:

1. Update your HTML structure #

First, add an ID to the form so we can easily target it in JavaScript:

<form id="inputForm" action="/cgi-bin/run.py">
  <input type="text" name="ins" id="ins">
  <input type="submit" id="sub" value="submit">
</form>
<div class="output" id="output"></div>

2. Add the jQuery script #

We'll use jQuery's submit() method to intercept the form submission, send an AJAX request to your Python script, and update the div with the result. Make sure you have jQuery loaded (you can download it locally and include it in your project):

$(document).ready(function() {
  // 拦截表单提交事件
  $('#inputForm').submit(function(e) {
    // 阻止默认的页面跳转行为
    e.preventDefault();
    
    // 获取文本框里的输入值
    const userInput = $('#ins').val();
    
    // 发送GET请求到Python脚本，带上输入参数
    $.get('/cgi-bin/run.py', { ins: userInput }, function(response) {
      // 请求成功后，把脚本返回的内容放到output div里
      $('#output').html(response);
    }).fail(function() {
      // 如果请求失败，显示错误提示
      $('#output').html('Oops, something went wrong. Check if your Python script is running correctly.');
    });
  });
});

3. Fix your Python script #

Your Python script needs to output the correct HTTP headers so the browser understands the response. Here's a basic example of run.py:

#!/usr/bin/env python3
import cgi

# 处理表单传递过来的参数
form_data = cgi.FieldStorage()
input_value = form_data.getvalue('ins', '')

# 必须先输出HTTP响应头，这是CGI的要求
print("Content-Type: text/html\n")

# 这里写你的业务逻辑，处理输入值并生成结果
result = f"You entered: {input_value}"
# 或者如果是复杂的处理（比如计算、数据查询），把最终结果输出即可

# 输出结果，这个内容会被AJAX接收
print(result)

4. Check XAMPP settings #

Make sure your XAMPP setup allows running Python CGI scripts:

• In your Apache httpd.conf file, confirm that ScriptAlias /cgi-bin/ points to your actual cgi-bin directory
• Ensure AddHandler cgi-script .py is enabled (so Apache recognizes .py files as CGI scripts)
• On Linux/Mac, give the script executable permissions with chmod +x run.py

That's it! Now when you click the submit button, the page won't reload, and your Python script's output will show up in the output div.

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