Question

我想在jQuery ajax发布请求后呈现新模板。当我使用jquery / ajax发出请求时，该怎么办？

这是发送发布请求的起始路径。

@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>

这是接收发布请求的方法：

@app.route('/row', methods=['POST'])
def row():
    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)

即使服务器毫无问题地收到发布请求，浏览器也不会重定向到row.html。我不想发回重定向URL和JSON，但实际上是渲染模板。

Answer 1

视图功能不允许GET请求，因此浏览器无法打开row.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)

Answer 2

您可以使用HTML呈现的模板（例如$('#some_id').html(response)）从ajax响应中设置html attribute。有关详细信息，请参见以下示例：

...
<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>

在Flask中使用Ajax发布请求后如何呈现模板

2 个答案: