如何从jQuery和Ajax正确地将数据附加到HTML？

Question

我正在使用Python，Flask和Ajax实现“加载更多文章”功能。一切都在服务器端工作，但我不知道如何使用jQuery将新数据附加到HTML。

我有从服务器端发送的以下json对象：

我的HTML模板中包含以下jQuery和Ajax代码：

<script type=text/javascript>
  $(function() {
    $('a#get-more').bind('click', function() {
      $.getJSON($SCRIPT_ROOT + '/_get_the_data_from_serverside', {
      }, function(data) {
        $("#more").append(data.stories[0].storycontent);
      });
      return false;
    });
  });
</script>
<span id=more></span>
<a href="#" id=get-more></a>

但它不起作用，你可以看到，json对象的数据如“storycontent”没有附加到HTML。

有什么想法吗？

Answer 1

json的路径应该是data [0] .storycontent。 像这样：

<script type=text/javascript>
  $(function() {
    $('a#get-more').bind('click', function() {
      $.getJSON($SCRIPT_ROOT + '/_get_the_data_from_serverside', {
      }, function(data) {
        $("#more").append(data[0].storycontent);
      });
      return false;
    });
  });
</script>
<span id="more"></span>
<a href="#" id=get-more></a>