向 Flask 应用程序发出 AJAX 请求答案

【问题标题】：Make an AJAX request to Flask application向 Flask 应用程序发出 AJAX 请求
【发布时间】：2016-06-01 19:09:01
【问题描述】：

我正在尝试在我的 Flask Web 应用程序中刷新 Jenkins 构建控制台输出，但是我无法使用 jQuery/AJAX 来执行此操作。

正如您在下面看到的，我只是尝试使用刷新按钮使其正常工作。理想情况下，我想在计时器上刷新 {{buildinfo}}。

目前我的测试函数/jQuery 正在返回错误：Uncaught TypeError: Illegal invocation。

这是我在开始走这条路之前使用的 app.py 中的（工作）功能：

@app.route('/buildinfo/<job_id>/<job_number>', methods=['GET', 'POST'])
def buildInfo(job_id, job_number):
    try:
        console_output = server.get_build_console_output(job_id, int(job_number))
        return render_template("buildinfo.html", buildinfo=console_output, job_id=job_id, job_number=job_number)
    except Exception as e:
        return render_template("buildinfo.html", error=str(e))

这是我用来接收请求并发送回客户端的测试函数：

@app.route('/_test')
def foo():
        a = request.args.get('a', None, type=str)
        b = request.args.get('b', 0, type=int)
        bar = server.get_build_console_output(a, int(b))
        return jsonify(result=bar)

这里是 buildinfo.html：

{% extends "base.html" %}
{% block content %}
<script type="text/javascript" src="{{ url_for('static', filename='jquery-1.12.0.min.js') }}"></script>
<script type="text/javascript">
var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>

$(function() {
    $('a#load').bind('click', function() {
        $.getJSON($SCRIPT_ROOT + '/_test', {
            a: $('{{job_id}}'),
            b: $('{{job_number}}')
        }, function(data) {
            $("#result").text(data.result);
        });
        return false;
    });
});
</script>

<div class="col-md-10">
    <h1>Build Info</h1>
    <br>
    <p>retrieving {{job_id}}, build number {{job_number}}</p>
    <br>
    <p>{{buildinfo}}</p>
    <br>
    <span id="result">?</span>
    <a href=# id="load">go</a>
</div>

{% endblock %}

【问题讨论】：

标签： javascript jquery python ajax flask

【解决方案1】：

当您应该传递值时，您正在向 ajax 调用提供 HTML 元素。改变这个：

a: $('{{job_id}}'),
b: $('{{job_number}}')

到这里：

a: {{job_id}},
b: {{job_number}},
...

我不确定您要发送的类型，如果您需要发送字符串 - 在双胡须周围加上引号，但这应该可以帮助您。有关类似问题，请参阅 here。

【讨论】：

【解决方案2】：

对于同一条船上的任何人，我都可以使用以下内容刷新 Flask 值。构建完成后，我可能会更新此答案以包括 clearInterval() 。感谢 GG_Python 指出我的错误。

app.py：

@app.route('/buildinfo/<job_id>/<job_number>', methods=['GET', 'POST'])
def buildInfo(job_id, job_number):
    try:
        console_output = server.get_build_console_output(job_id, int(job_number))
        return render_template("buildinfo.html", buildinfo=console_output, job_id=job_id, job_number=job_number)
    except Exception as e:
        return render_template("buildinfo.html", error=str(e))

@app.route('/_test')
def foo():
        a = request.args.get('a', None, type=str)
        b = request.args.get('b', 0, type=int)
        bar = server.get_build_console_output(a, int(b))
        return jsonify(result=bar)

buildinfo.html：

{% extends "base.html" %}
{% block content %}
<script type="text/javascript" src="{{ url_for('static', filename='jquery-1.12.0.min.js') }}"></script>
<script type="text/javascript">
var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>
<script type="text/javascript">

    setInterval(function() {
        $.getJSON($SCRIPT_ROOT + '/_test', {
            a: "{{job_id}}",
            b: {{job_number}}
        }, function(data) {
            $("#result").text(data.result);
        });
        return false;
    }, 3000);

</script>

<div class="col-md-10">
    <h1>Build Info</h1>
    <br>
    <p>retrieving {{job_id}}, build number {{job_number}}</p>
    <br>
    <p id="result">{{buildinfo}}</p>
    <br>
</div>

{% endblock %}

【讨论】：