尽管使用 Flask 成功进行了 AJAX 请求，但网页上的图像并未更新

问题描述 投票：0回答：1

我目前正在开发一个个人项目，该项目具有此 python 函数，可以在特定时间内更新网页上的图像。输出表明图像已成功检索，但实际网页上并未更新。这是两者的脚本：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Viewer</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <h1>Image Viewer</h1>
    <img id="image-display" src="{{ url_for('static', filename=current_images) }}" alt="Random Image">
    <br>
    <button id="update-button">Update Image</button>
    <div id="countdown">5</div>

    <script>
        // Function to update the image using Ajax
        function updateImage() {
            $.ajax({
                url: "{{ url_for('update_image') }}",
                method: "GET",
                success: function(data) {
                    $("#image-display").attr("src", data.current_images);
                }
            });
        }

        // Function to handle the button click
        function handleButtonClick() {
            var countdown = 5;

            // Update the countdown and the image every 0.2 seconds
            var countdownInterval = setInterval(function() {
                $("#countdown").text(countdown);
                
                if (countdown === 0) {
                    clearInterval(countdownInterval);
                    $("#countdown").text("");
                } else {
                    updateImage();
                    countdown--;
                }
            }, 200);
        }

        // Attach click event to the button
        $("#update-button").click(function() {
            handleButtonClick();
        });
    </script>
</body>
</html>

应用程序.py

import random
from flask import Flask, render_template

app = Flask(__name__)

image_list = ['img model/Talk1Eh.png','img model/Talk1Mmm.png', 'img model/Talk1OpenMouth_Oh.png',
            'img model/Talk1OpenMouthA.png', 'img model/Talk1OpenMouthHA.png']

@app.route('/')
def index():
    return render_template('index.html', current_images = random.choice(image_list))

@app.route('/update_image')
def update_image():
    current_images = random.choice(image_list)
    print(current_images)
    return render_template('index.html', current_images = current_images)

if __name__ == '__main__':
    app.run(debug=True)

调试输出

127.0.0.1 - - [08/Dec/2023 21:26:28] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [08/Dec/2023 21:26:28] "GET /static/img%20model/Talk1OpenMouth_Oh.png HTTP/1.1" 304 -
img model/Talk1Eh.png
127.0.0.1 - - [08/Dec/2023 21:26:30] "GET /update_image HTTP/1.1" 200 -
img model/Talk1Mmm.png
127.0.0.1 - - [08/Dec/2023 21:26:30] "GET /update_image HTTP/1.1" 200 -
img model/Talk1Eh.png
127.0.0.1 - - [08/Dec/2023 21:26:30] "GET /update_image HTTP/1.1" 200 -
img model/Talk1OpenMouthHA.png
127.0.0.1 - - [08/Dec/2023 21:26:31] "GET /update_image HTTP/1.1" 200 -
img model/Talk1Eh.png
127.0.0.1 - - [08/Dec/2023 21:26:31] "GET /update_image HTTP/1.1" 200 -
img model/Talk1OpenMouthA.png
127.0.0.1 - - [08/Dec/2023 21:26:33] "GET /update_image HTTP/1.1" 200 -
img model/Talk1OpenMouthHA.png
127.0.0.1 - - [08/Dec/2023 21:26:33] "GET /update_image HTTP/1.1" 200 -
img model/Talk1Mmm.png
127.0.0.1 - - [08/Dec/2023 21:26:33] "GET /update_image HTTP/1.1" 200 -
img model/Talk1Mmm.png
127.0.0.1 - - [08/Dec/2023 21:26:34] "GET /update_image HTTP/1.1" 200 -
img model/Talk1OpenMouthHA.png
127.0.0.1 - - [08/Dec/2023 21:26:34] "GET /update_image HTTP/1.1" 200 -
python html ajax flask
1个回答
0
投票

您想通过 AJAX 获取随机选择的图像的 URL。

但是，在您的尝试中，您再次获得了整个模板。它没有 

current_images
属性，因为它包含渲染的 HTML 代码而不是 JavaScript 对象。这以及相应 URL 中的 
static
文件夹被忽略的事实意味着无法加载图像。

我建议您在使用 

url_for
以通常的方式创建完整的 URL 后，以 JSON 格式发送 URL。

from flask import jsonify, url_for

# ...

@app.route('/update_image')
def update_image():
    current_images = random.choice(image_list)
    print(current_images)
    return jsonify(current_images=url_for('static', filename=current_images))
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.