Flask接收POST请求后如何自动渲染模板展示数据？

Hey, let's work through why your scanned data isn't showing up on your Flask-rendered HTML page. You mentioned the POST request logs show success, but the Jinja2 variables ({{ item }} and {{ value }}) aren't populating, and redirecting to /item/ isn't triggering a page refresh or data display. Here's how to resolve this:

1. Why Your Redirect Isn't Working #

Chances are your scanner script is sending the POST request asynchronously (like using Python's requests library or JavaScript fetch). When you send an async request, the browser (or script) just receives the redirect response—it won't automatically navigate to the new route. Redirects only trigger page jumps for browser-initiated GET/POST requests (like submitting a form directly).

2. Solution 1: Render the Template Directly from the POST Route #

The simplest fix is to skip the redirect entirely. Process the POST data, then pass it directly to your template for rendering:

from flask import Flask, render_template, request

app = Flask(__name__)

# Route to receive the scanner's POST request
@app.route('/scan', methods=['POST'])
def handle_scan():
    if request.is_json:
        scan_data = request.get_json()
        # Extract the values (match your JSON keys here!)
        item = scan_data.get('item')
        price = scan_data.get('price')
        # Pass data to your template and render it immediately
        return render_template('item.html', item=item, value=price)
    # Return error if request isn't JSON
    return "Invalid request: JSON required", 400

# Optional: GET route for accessing the page normally
@app.route('/item')
def item_page():
    # Default empty state if no scan has happened
    return render_template('item.html', item=None, value=None)

Update your item.html to handle both populated and empty states:

<!DOCTYPE html>
<html>
<head>
    <title>Scanned Item</title>
</head>
<body>
    {% if item and value %}
        <h3>Scanned Successfully!</h3>
        <p>Item: {{ item }}</p>
        <p>Price: {{ value }}</p>
    {% else %}
        <p>No item scanned yet. Use your scanner to send data.</p>
    {% endif %}
</body>
</html>

3. Solution 2: Redirect with Query Parameters (If You Want Separate Routes) #

If you prefer keeping POST/GET logic separate, you can pass the scanned data via query parameters in the redirect. Since redirects use GET requests, you can't send JSON directly—query params are the way to go:

from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

@app.route('/scan', methods=['POST'])
def handle_scan():
    if request.is_json:
        scan_data = request.get_json()
        item = scan_data.get('item')
        price = scan_data.get('price')
        # Redirect to /item with data as query params
        return redirect(url_for('item_page', item=item, value=price))
    return "Invalid request: JSON required", 400

@app.route('/item')
def item_page():
    # Pull data from the GET request's query parameters
    item = request.args.get('item')
    value = request.args.get('value')
    return render_template('item.html', item=item, value=value)

Note: This works best for simple, non-sensitive data. If your item or price has special characters (like spaces or symbols), you'll need to URL-encode them, but for most use cases, this is fine.

4. Solution 3: Async Request + Frontend DOM Update (No Page Refresh) #

If your scanner is a frontend tool (like a browser-based QR code reader), you can update the page without reloading by handling the POST response in JavaScript:

Frontend JavaScript #

// Example function to send scanned data
async function sendScanData(item, price) {
    try {
        const response = await fetch('/scan', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ item: item, price: price })
        });
        const data = await response.json();
        // Update the page with the scanned data
        document.getElementById('item-display').textContent = data.item;
        document.getElementById('price-display').textContent = data.price;
    } catch (error) {
        console.error('Error sending scan data:', error);
    }
}

Backend Route (Returns JSON) #

@app.route('/scan', methods=['POST'])
def handle_scan():
    if request.is_json:
        scan_data = request.get_json()
        return {
            'item': scan_data.get('item'),
            'price': scan_data.get('price')
        }
    return "Invalid request: JSON required", 400

HTML Template #

<!DOCTYPE html>
<html>
<head>
    <title>QR Scanner</title>
</head>
<body>
    <h3>Scanned Item:</h3>
    <p>Item: <span id="item-display">No item scanned</span></p>
    <p>Price: <span id="price-display">$0.00</span></p>
</body>
</html>

Quick Troubleshooting Checks #

• Double-check variable names: Make sure the keys in your POST JSON match what you're extracting in Flask (e.g., if your JSON has price, don't try to extract value unless you rename it).
• Verify JSON data: Check your request logs to confirm the POST JSON actually contains item and price fields—typos here are super common!
• Use browser dev tools: If using frontend async requests, open F12 > Network tab to inspect the POST request and response. Ensure the response returns the correct data.

Pick the solution that fits your setup best, and you'll have that scanned data showing up in no time!

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