Question

我需要在Flask应用中动态生成表格。我在这篇文章Rendering Jinja template in Flask following ajax response中发现可以通过ajax返回html页面。我决定尝试在外部html页面中生成一个表并附加到父html中的div但是我有一个问题，更具体地说，如何在ajax中附加外部html。这是我简化的home.html：

<!doctype html>
<html lang="en">
    <head>
        <title>Document</title>
        <meta charset="UTF-8"/>            
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>
    <body>

    <button id="table">Get table</button>

    <div id="my_table">

    </div>

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    </body>
</html>

table.html：

<table>
<thead>
    <tr>
        <th>#</th>
        <th>Make</th>
        <th>Model</th>
        <th>Year</th>
    </tr>
</thead>

    <tbody>
    {% for row in table_data %}
        <tr>
        {% for column in row %}       
                 <td>{{ column }}</td>
        {% endfor %}
        </tr>
    {% endfor %}
    </tbody>
</table>

app.py：

from flask import Flask, render_template, jsonify, request

app = Flask(__name__)

@app.route('/get_table', methods=["POST", "GET"])
def get_table():
    row1 = request.json['row1']
    row2 = request.json['row2']
    table_data = [row_1, row_2]
    return render_template('table.html', table_data=table_data)

if __name__ == "__main__":
    app.run(debug=True)

main.js：

$('#table').on('click', function(){

    $.ajax({
        type: "POST",
        url: "/get_table",
        contentType: 'application/json; charset=UTF-8',
        data: JSON.stringify({'row1': [1, 'honda', 'accord', 2004] ,
                              'row2': [2, 'toyota', 'camry', 2006]}),
        dataType: 'json',
        success: function(data){
            $('#my_table').html(data);
        },
        error: function(error){
            console.log(error);
        },

    });
});

$（＆＃39;＃my_table＆＃39;）。html（数据）似乎无法正常工作 - 该表是在/ get_table生成的，但它不会附加到#my_table div。任何有关如何使其发挥作用的意见/建议都受到高度赞赏。

Answer 1

我注意到的第一件事是你创建了ajax请求，但是在get_table（）方法中你正在使用render_template。即使它工作，如果你像这样解析它也不会处理jinja2逻辑。如果您希望在ajax调用中返回数据，则必须返回包含已处理数据（如"...'<table>...<td>'+request.json['row1']+'</td>'..."）的纯字符串，然后将其绑定到HTML。我建议使用json而不是普通字符串，例如：

@app.route('/get_table', methods=["POST", "GET"])
def get_table():
   row1 = request.json['row1']
   row2 = request.json['row2']
   table_data = [row_1, row_2]
   return jsonify(table_data)

然后将接收到的数据与jQuery绑定到表中。因此，您也不需要模板中的jinja2逻辑，而是简单的html。

如何使用ajax和Flask附加外部html

1 个答案: