Jquery 如何在Flask中使用Ajax在post请求后呈现模板

我想在jQuery ajax post请求之后呈现一个新模板。当我使用jquery/ajax发出请求时，我如何做到这一点

这是发送post请求的初始路由

@app.route("/data")
def data():
if request.method=='GET':
    cursor.execute("SELECT * from data")
    data = cursor.fetchall()
    cursor.execute("DESCRIBE data")
    headers = cursor.fetchall()
    return render_template("data.html", data=data, headers=headers)

下面是data.html中发送请求的jQuery

...
<script>
  $(document).ready(function(){
    $('.row').each(function(){
      $(this).click(function(){
        let rowId = $(this).attr('id');
        var data_send = {'id' : rowId};
        $.ajax({
          type:'POST',
          url: '{{ url_for('row') }}',
          data : JSON.stringify(data_send),
          dataType: "json"
        })
      })
    })
  });
</script>

---

即使服务器毫无问题地接收到post请求，浏览器也不会重定向到row.html。我不想发回重定向URL和JSON，而是实际呈现一个模板。

视图函数不允许GET请求，因此浏览器无法打开row.html

试一试

您可以使用html呈现的模板从ajax响应进行设置，如

$（'#some_id'）.html（响应）

。有关详细信息，请参见以下示例：

...
<script>
  $(document).ready(function(){
    $('.row').each(function(){
      $(this).click(function(){
        let rowId = $(this).attr('id');
        var data_send = {'id' : rowId};
        $.ajax({
          type:'POST',
          url: '{{ url_for('row') }}',
          data : JSON.stringify(data_send),
          dataType: "json",
          success: function(response) {
            $(this).html(response);
          }
        })
      })
    })
  });
</script>

。。。
$（文档）.ready（函数（）{
$（'.row'）。每个（函数（）{
$（此）。单击（函数（）{
让rowId=$（this.attr（'id'）；
var data_send={'id'：rowId}；
$.ajax({
类型：'POST'，
url:“{url_for（'row'）}}”，
数据：JSON.stringify（数据发送），
数据类型：“json”，
成功：功能（响应）{
$（this.html）（响应）；
}
})
})
})
});

@app.route('/row', methods=['GET', 'POST'])
def row():
    data = None
    headers = None
    if request.methods == 'POST':
        recieved_data = request.get_data().decode('utf8')
        target_id = json.loads(recieved_data)['id']
        cursor.execute("DESCRIBE data")
        headers = cursor.fetchall()
        cursor.execute("SELECT * from data")
        data = cursor.fetchall()[int(target_id)]
    return render_template("row.html",data = data, headers=headers)

...
<script>
  $(document).ready(function(){
    $('.row').each(function(){
      $(this).click(function(){
        let rowId = $(this).attr('id');
        var data_send = {'id' : rowId};
        $.ajax({
          type:'POST',
          url: '{{ url_for('row') }}',
          data : JSON.stringify(data_send),
          dataType: "json",
          success: function(response) {
            $(this).html(response);
          }
        })
      })
    })
  });
</script>