Question

我有一个包含书籍列表的选择框。用户可以选择一本书并点击提交按钮以在单独的页面上查看章节。

但是，当用户更改选择框时，我希望部分页面刷新以显示用户在书上输入的过去注释，并允许用户为该书编写新注释。我不希望在下一页的章节中查看和创建特定书籍的注释，因为它会使它混乱。

我在后端使用Python / Bottle，在前端使用SimpleTemplate引擎。

目前，当更改选择框时，ajax调用会接收包含书籍信息和所有注释的Json字符串。然后通过jQuery.parseJson()将此json字符串转换为json对象。

我希望能够做的就是遍历笔记并渲染一个包含多个单元格和行的表格。

我是否必须在jQuery / js（而不是瓶子/模板框架）中执行此操作？我假设是因为我只想要部分刷新，而不是完整刷新。

我正在寻找一段代码，它可以通过jQuery / js从ajax检索到的json / js呈现具有可变行数的表。

<head>
    <title>Book Notes Application - Subjects</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>

    <script>
        $(document).ready(function(){
            $('#subject_id').change(function(){
                var subject_id = $(this).val();
                $.ajax({
                    url : "subject_ajax?subject_id=" + subject_id,
                    success : function(data) {
                        alert(data)

                        json = jQuery.parseJSON(data);
                    },
                    error : function() {
                        alert("Error");
                    }
                });
            })
        })

    </script>
</head>
<body>

    <!-- CHOOSE SUBJECT -->
    <FORM action="/books" id="choose_subject" name="choose_subject" method="POST">
        Choose a Subject:
        <select name="subject_id" id="subject_id">
            % for subject in subjects:
                <option value="{{subject.id}}">{{subject.name}}</option>
            % end
        </select><input type="submit" name="sub" value="Choose Subject"/>
        <BR />
    </FORM>

Answer 1

这在很大程度上取决于您的JSON和HTML的格式。但是有一张桌子，比如：

<table id="books">
  <tr>
    <th>Chapter</th>
    <th>Summary</th>
  </tr>
</table>

您可以执行以下操作：

$(function(){
    $('#choose_subject').submit(function () {
        var subject_id = $(this).val();
        $.getJSON("subject_ajax?subject_id=" + subject_id, function(data) {
            console.log(data);
            $.each(data.chapters, function (index, chapter) {
                $('#books').append('<tr><td>' + chapter.title + '</td><td>' + chapter.summary + '</td></tr>');
            })
        });
        return false;
    })
})

这假设JSON如：

{
  "notes": [
    "Note 1",
    "Note 2"
  ],
  "chapters": [
    {
      "title": "First chapter",
      "summary": "Some content"
    },
    {
      "title": "Second chapter",
      "summary": "More content"
    }
  ]
}

其他说明：

如果您使用的是HTML 4或更早版本，请将所有标记保留为大写。如果您使用的是XHTML或HTML5，请将所有标记保持为小写。
您不需要$(document).ready(function () {...})，最新版本的jQuery $(function () {...} )的工作方式相同，而且更易于阅读。
如果您只使用成功状态（就像您在这里一样），则可以使用$.get代替$.json。如果您确信您获得的数据是有效的JSON，则可以使用getJSON代替get。它将解析JSON，以便您自动将其作为JavaScript对象提供给您。
在您进行测试时，使用console.log而不是alert通常会更方便。实际上，一般来说使用alert通常是个坏主意。

Answer 2

我不熟悉Python / Bottle或其SimpleTemplate引擎，但您可以考虑在服务器端为表生成html并将其返回到ajax响应中，而不是返回JSON。

var subject_id = $(this).val();
$.ajax('subject_ajax', {
    type: 'get',
    data: { subject_id: subject_id },
    dataType: 'html',
    success : function(html) {
        // Insert the html into the page here using ".html(html)"
        // or a similar method.
    },
    error: function() {
        alert("Error");
    }
});

致电.ajax()时：

“type”设置默认为“get”，但我更喜欢明确设置它。
使用ajax调用的“data”设置指定URL参数。
始终指定“dataType”设置。

我还建议你在表单的on-submit处理程序中执行ajax调用，并为提交表单的select添加一个on-change处理程序。

$(document).ready(function(){
    $('#subject_id').change(function() {
        $(this.form).submit();
    });

    $('#choose_subject').submit(function(event) {
        event.preventDefault();
        var subject_id = $('#subject_id').val();
        if (subject_id) {
            $.ajax(...);
        }
    });
});

这样，您的提交按钮可以在单击时使用。

Answer 3

您需要注意以下几点：

1）您的SimpleTemplate库是否包含在内？ 2）您是否通过compileTemplate（）编译了模板？

一旦您知道您的库被包含（检查控制台是否有错误），请将返回的数据传递给成功处理程序方法，编译模板，更新您尝试更新的任何元素。

我不确定您是否要更新您在模板中定义的相同元素。

$(document).ready(function(){
    $('#subject_id').change(function(){
        var subject_id = $(this).val();
        $.ajax({
            url : "subject_ajax?subject_id=" + subject_id,
            success : function(data) {

                var template_data = JSON.parse(data);
                var template = $('#subject_id').toString(); // reference to your template
                var precompiledTemplate = compileTemplate(template);
                var result = precompiledTemplate(template_data);
                $('#subject_id').append(result);

            },
            error : function() {
                alert("Error");
            }
        });
    })
})

您也可以尝试将模板移出您尝试更新的元素，如下所示：

<script type="text/template" id="subject-select-template">
% for subject in subjects:
    <option value="{{subject.id}}">{{subject.name}}</option>
% end
</script>

然后只需创建一个空白的select元素：

<select id="select_id"></select>

更新参考资料。无论如何，希望这是有帮助的。它应该可以工作，但如果没有您的特定代码我就无法测试;）

另外，如果您还没有，请查看此演示示例： https://rawgithub.com/snoguchi/simple-template.js/master/test/test.html

如何使用jQuery从AJAX调用呈现HTML

3 个答案: