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

Question

我是 javascript 新手，我创建了一个烧瓶站点，我想关注 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 一起，数据属性允许您将复杂数据（如完整的job_info 结构）传输到您的客户端，而不仅仅是像单个ID 这样的简单值。警告：记得使用forceescape 过滤器来避免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。