向 Flask 应用程序发出 AJAX 请求

Posted 2023-03-05

【中文标题】向 Flask 应用程序发出 AJAX 请求

【英文标题】：Make an AJAX request to Flask application

【发布时间】：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 %

【参考方案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 %