Question

我对AJAX服务器进行了一次flask调用，该服务器返回了数据，然后我可以通过使用{的html s在id中动态显示值{1}}。

问题是我想扩展它，以便对返回的值进行剔除，我想更改html中组件的颜色。

我曾尝试在html中实施条件测试，但是它始终无法通过测试。

AJAX

jinja

HTML

(function poll() {
    $.ajax({
        url: "/get_data",
        type: "GET",
        success: function(data) {
            console.log("polling");
            $("#press_switch").text(data.press_sw);
        },
        dataType: "json",
        complete: setTimeout(function() {poll()}, 1000),
        timeout: 500
    })
})();

我尝试测试'press_switch <div class="row"> <div class="col-sm-6"> {% if press_switch == 1 %} <div class="alert alert-success" role="alert">OK</div> {% else %} <div class="alert alert-warning" role="alert">FAULT</div> {% endif %} </div> </div> press_sw and'1'and testing for a string i.e.假`条件。

Answer 1

免责声明：从问题来看，何时您要更改组件颜色并不清楚。我假设每当您按下按钮（触发jQuery调用）时，它都是无条件的。如果您更新了问题，请告诉我以进行相应更改。

当您在网页（或ajax）中进行异步调用时，您应该只返回预期的值。这通常不是Jinja2模板中的html代码段。

我建议您在路由（或视图函数）中添加对异步请求的检查，然后仅将必要的值返回给客户端。在客户端，您必须更新将元素颜色设置为接收值。

我的意思看起来像下面的代码片段。

在烧瓶侧面：

@app.route('/get_data')
def get_data_function():
    ...
    if request.args.get('to_ajax', False):
        # actually calculate return value
        return jsonify({'result': 'red'})
    ...

在客户端：

(function poll() {
    $.ajax({
        url: "/get_data?to_ajax=1",
        type: "GET",
        success: function(data) {

            console.log("polling");
            var color = data.result ? "green" : "red";
            console.log("Received: ", data.result, " set to: ", color);
            $("#press_switch").css('color', color);
        },
        dataType: "json",
        complete: setTimeout(function() {poll()}, 1000),
        timeout: 500
    })
})();

请注意：

Flask已弃用request.is_xhr，因为没有确定性的方式来知道它被异步调用-这就是为什么我在查询参数中添加了?is_ajax=1（并在后端进行检查的原因）。
当您在客户端实际收到请求时，您必须对此采取措施，因此在success函数上，您需要更改组件的颜色并将其设置为接收值。

使用JINJA测试AJAX值内联HTML

1 个答案: