javascript - Ajax 请求需要两次点击才能从 python 脚本中检索数据

Question

我正在尝试通过单击 div 来更改 div 中的内容。该请求通过 Ajax 发送到一个 python 脚本，该脚本发送一个 ssh 请求，然后返回结果。

我的问题是，似乎第一次单击发送请求，第二次单击返回数据。因此，如果我单击第一个 div，则没有任何反应，第二次单击时，第一次单击的数据将填充到我单击的下一个 div 中。

可能是 ssh 请求需要很长时间，所以在返回响应之前完成了 ajax 脚本？

是否可以将数据直接从 python 脚本返回到 Ajax 脚本，而不是先将其发送到 response.html？

应用程序

@app.route('/_get_data/', methods=['POST'])
def _get_data():
    vlan = request.form.get('vlan')
    result = str(SSHConnection("172.16.0." + str(vlan) ,"command"))
    return jsonify({'data': render_template('response.html', result = result)})

索引.html

$(document).ready(function() {
  $(".p-1").on('click', function(event) {
    var vlan;
    vlan = event.target.id;
    $.ajax({
      url: "/_get_datan/",
      type: "POST",
      data: {
        vlan
      },
      success: function(resp) {
        result = (resp.data);
      }
    });
    document.getElementById(event.target.id).innerHTML = result;
  });
});

<div class="col">
  <div class="p-1 border bg-light" align="center" id="101">101 <i class='fas fa-power-off' style='color:#eeeeee'></i></div>
</div>
<div class="col">
  <div class="p-1 border bg-light" align="center" id="102">102 <i class='fas fa-power-off' style='color:#eeeeee'></i></div>
</div>
<div class="col">
  <div class="p-1 border bg-light" align="center" id="103">103 <i class='fas fa-power-off' style='color:#eeeeee'></i></div>
</div>

响应.html

{{result}}

标签： javascriptpythonjqueryajaxflask