向Flask應用程序發出一個AJAX請求

Question

我想在我的Flask Web應用程序中刷新Jenkins構建控制檯輸出，但是我在使用jQuery/AJAX時遇到問題。

正如你可以看到下面，我只是想使用刷新按鈕來得到這個工作。理想情況下，我想刷新定時器上的{{buildinfo}}。

目前我的測試函數/ jQuery返回錯誤：Uncaught TypeError：非法調用。

繼承人從我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 %} 

Answer 1

你喂當您應該傳遞值時，將HTML元素添加到ajax調用中。更改此：

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

這樣：

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

我不知道你要發送，如果您需要發送周圍的雙小鬍子strings-包裹報價的類型，但是這個應該讓你去。有關類似問題，請參閱here。

Answer 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 %}