如何通过Python的CGI调用带样式的HTML页面展示票务预订信息？

以下是几种无需Web框架的可行方案，均能实现带样式的预订成功页面展示：

方案1：HTML模板文件替换变量 #

将带样式的HTML写在单独的模板文件中，Python读取模板后替换动态数据（如订单号、票价）再输出，实现样式与逻辑分离。

步骤： #

1. 创建带占位符的HTML模板（比如success_template.html）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>预订成功</title>
    <style>
        .success-container {
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #4CAF50;
            border-radius: 8px;
            background-color: #f9fff9;
            text-align: center;
            font-family: Arial, sans-serif;
        }
        .price {
            font-size: 24px;
            color: #4CAF50;
            font-weight: bold;
            margin: 20px 0;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
    <div class="success-container">
        <h1>🎉 票务预订成功！</h1>
        <p>您的订单已确认，订单号：{{booking_id}}</p>
        <p class="price">总票价：¥{{ticket_price}}</p>
        <p>感谢您的预订，祝您旅途愉快！</p>
    </div>
</body>
</html>

2. 在Python CGI脚本中读取模板并替换变量：

#!/usr/bin/env python3
import mysql.connector
import os

# 1. 数据库操作：获取已存入的订单信息（示例逻辑，根据实际业务调整）
db = mysql.connector.connect(
    host="localhost",
    user="your_db_user",
    password="your_db_pass",
    database="ticket_booking"
)
cursor = db.cursor()
# 假设通过用户提交的信息查询或获取刚插入的订单ID和票价
# 这里用模拟数据，实际替换为真实查询逻辑
booking_id = "TK20240520001"
ticket_price = 280

# 2. 读取模板文件（注意模板路径要与CGI脚本路径匹配）
template_path = os.path.join(os.path.dirname(__file__), "success_template.html")
with open(template_path, "r", encoding="utf-8") as f:
    html_content = f.read()

# 3. 替换模板中的占位符
html_content = html_content.replace("{{booking_id}}", booking_id)
html_content = html_content.replace("{{ticket_price}}", str(ticket_price))

# 4. 输出CGI响应头和最终HTML
print("Content-Type: text/html; charset=utf-8")
print()  # 必须用空行分隔响应头与内容
print(html_content)

方案2：直接输出带内联CSS的HTML #

如果页面结构简单，可直接在Python中拼接带内联CSS的HTML内容，无需额外模板文件。

#!/usr/bin/env python3
import mysql.connector

# 数据库操作：获取订单ID和票价（逻辑同方案1）
booking_id = "TK20240520002"
ticket_price = 320

# 输出带样式的HTML
print("Content-Type: text/html; charset=utf-8")
print()
print(f"""
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>预订成功</title>
    <style>
        body {{ 
            font-family: 'Segoe UI', sans-serif; 
            background-color: #f0f8ff; 
            margin: 0;
            padding: 0;
        }}
        .success-box {{
            width: 500px;
            margin: 100px auto;
            padding: 30px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            text-align: center;
        }}
        .price {{ 
            color: #2ecc71; 
            font-size: 28px; 
            margin: 20px 0;
        }}
        h2 {{
            color: #2c3e50;
        }}
    </style>
</head>
<body>
    <div class="success-box">
        <h2>✅ 预订成功！</h2>
        <p>订单号：{booking_id}</p>
        <p class="price">票价：¥{ticket_price}</p>
        <p>请妥善保存订单信息，凭订单号取票</p>
    </div>
</body>
</html>
""")

方案3：重定向到静态HTML并传递URL参数 #

将预订成功页面作为静态HTML文件放在服务器上，Python CGI脚本完成数据库操作后，通过HTTP重定向跳转到静态页面，并通过URL参数传递动态数据，前端用JavaScript读取参数并展示。

步骤： #

1. Python CGI脚本输出重定向响应：

#!/usr/bin/env python3
import mysql.connector

# 数据库操作获取订单ID和票价
booking_id = "TK20240520003"
ticket_price = 199

# 输出重定向头（注意静态页面路径要正确，比如放在服务器的静态文件目录下）
print("Content-Type: text/html; charset=utf-8")
print(f"Location: /static/success.html?booking_id={booking_id}&price={ticket_price}")
print()  # 空行分隔头与内容

2. 静态HTML文件（success.html）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>预订成功</title>
    <style>
        .success-container {
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #4CAF50;
            border-radius: 8px;
            background-color: #f9fff9;
            text-align: center;
            font-family: Arial, sans-serif;
        }
        .price {
            font-size: 24px;
            color: #4CAF50;
            font-weight: bold;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="success-container">
        <h1>🎉 票务预订成功！</h1>
        <p>您的订单已确认，订单号：<span id="booking-id"></span></p>
        <p class="price">总票价：¥<span id="ticket-price"></span></p>
        <p>感谢您的预订，祝您旅途愉快！</p>
    </div>
    <script>
        // 读取URL参数并填充到页面
        const urlParams = new URLSearchParams(window.location.search);
        document.getElementById('booking-id').textContent = urlParams.get('booking_id') || '未知';
        document.getElementById('ticket-price').textContent = urlParams.get('price') || '0';
    </script>
</body>
</html>

各方案对比 #

• 模板替换方案：最推荐，样式与逻辑完全分离，便于后续维护和修改页面样式，适合复杂页面。
• 直接输出HTML：快速简单，适合页面结构简单、样式较少的场景。
• 重定向方案：CGI逻辑与前端页面完全独立，前端可单独优化，但需要注意URL参数的转义（避免特殊字符导致的问题）。

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