Flask，如何使用生成的 ID 刷新 ajax url

Question

我是 javascript 的新人，我已经创建了一个 flask 站点，我想关注 ansible tower 工作。我已经创建了一个特定的路线：

@app.route("/tower/<int:id>", methods=['POST','GET'])
def status(id):
    launch = True
    job_info = {}
    status = refreshstatus(id)
    return render_template(
        'tower.html',
        job_info = job_info,
        status = status,
        launch = launch,
        id = id)

@app.route("/tower", methods=['POST','GET'])
def tower():
    launch = False
    if request.method == 'POST':
        keyword = request.form['launchjob']
        logger.info("Test | Keyword var => " + keyword)
        template_id = request.form['template_id']
        job_info = launch_job(template_id, keyword)
        launch = True
        return render_template('tower.html', job_info = job_info, launch = launch)
    else:
        return render_template('tower.html')

我的 js 脚本：

function refresh() {
    $.ajax({
        url: '/tower/' + id,
        dataType: 'json',
        id: { id : job_info.job_id },
        success: function(data) {
        $('#statustable').html(data);
        }
      });
      setTimeout(refresh, 10000);
      console.log('refresh')
    };
$(function(){
      refresh();
});

和我的 html 文件

<th scope="row"></th>
<td> {{ job_info.job_id }}</td>
<td><p class="text-warning" id="statustable">{{ job_info.job_status }}</p></td>
<td><a href="{{ job_info.url }}" target="_blank">Lien vers le stdout</a></td>

当我手动刷新时，作业状态会发生变化，但不会自动刷新。你能帮忙吗？

谢谢

大卫

Answer 1

JavaScript 看不到您服务器的变量。 job_info.job_id 不会在您的浏览器中定义。

如果您想在浏览器中使用它，您需要以某种方式将变量值传输到浏览器。

一种方法是阅读 <td>{{ job_info.job_id }}</td> 中的文本。
更好的方法是使用 HTML data attribute.

如果您在服务器端像这样更改视图：

<tr data-job-id="{{job_info.job_id|tojson|forceescape}}">
  <th scope="row"></th>
  <td>{{ job_info.job_id }}</td>
  <td><p class="text-warning" id="statustable">{{ job_info.job_status }}</p></td>
  <td><a href="{{ job_info.url }}" target="_blank">Lien vers le stdout</a></td>
</tr>

然后您可以在客户端使用 jQuery 访问 data-job-id="..." 中的值：

function refresh() {
    const id = $('#statustable').closest("tr").data('job-id');
    $('#statustable').load('/tower/' + id);
    setTimeout(refresh, 10000);
};

$(refresh);

连同Jinja's tojson filter, data attributes allow you to transport complex data like the complete job_info structure to your client, not just simple values like a single ID. Caveat: Remember to use the forceescape filter to avoid issues。
将 data-job-id="..." 移动到 HTML 中最有意义的元素。
$(element).load(url) 是 $.ajax(url) -> success -> $(element).html(response) 的缩写形式。参见 https://api.jquery.com/load/。
$(refresh) 是 $(function () { refresh(); }) 的缩写形式。参见 https://api.jquery.com/jquery/#jQuery3。

Flask，如何使用生成的 ID 刷新 ajax url

Flask, How to refresh an ajax url with a generated id

javascript

ajax

flask