Question

您好我正在使用flask在python中创建一个Web应用程序。在我的profile.html页面模板中，我有profile.html，如下所示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>

    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
    <script src="../static/js/jquery-1.11.2.js"></script>
    <script src="../static/js/getAcademic.js"></script>
  </head>

  <body>

      <div class="jumbotron">
      </div>

  </body>
</html>

在app.py中，

@app.route('/getDetails')
def getDetails():
    try:
        #get data from mysql database and convert to a json and return

        return json.dumps(academic_dict)

    except Exception as e:
        return render_template('error.html', error=str(e))

返回的json对象如下，

在我的js文件中，

$(function() {
    $.ajax({
        url: '/getDetails',
        type: 'GET',
        success: function(res) {
            var div = $('<table>')
                .attr('class', 'list-group')
                .append($('<tr>')
                    .attr('class', 'list-group-item active')
                    .append($('<td>')
                        .attr('class', 'list-group-item-text'),
                        $('<td>')
                        .attr('class', 'list-group-item-text')));


            var wishObj = JSON.parse(res);
            var wish = '';

            $.each(wishObj,function(index, value){
                wish = $(table).clone();
                $(wish).find('td').text(value.Title);
                $(wish).find('td').text(value.Data);
                $('.jumbotron').append(wish);
            });
        },
        error: function(error) {
            console.log(error);
        }
    });
});

json已正确转换并返回，但数据未显示在profile.html页面中。我检查了控制台，它在.js文件中显示错误Uncaught ReferenceError: table is not defined。

我想显示一个表格，其中包含作为json对象返回的数据，但是在加载profile.html页面时表格没有显示。请帮帮我。

Answer 1

您在wish = $(table).clone();行上犯了一个简单的错误（但请放心，这会发生在每个人身上……）–您使用table引用保存的<table>在变量div中。

在此处将$(table)替换为$(div)，或者（我建议使用此解决方案以提高可读性）将var div = $('<table>')重命名为var table = ...

（很抱歉恢复了这样的旧帖子，但我正在追捕:]）

哦，还有一点：请不要使用代码的屏幕截图，但是代码本身（甚至只是缩短了）可以帮助我们测试您的问题和解决方案：

[{'Title': 'Name', 'Data': 'john mark'},
{'Title': 'Faculty', 'Data': 'cs'}]`

不使用烧瓶在网页中显示表格

1 个答案: