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

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 个解决方案

解决方案1
5 2014-03-23 23:28:41

解决方案2
4 已采纳 2014-03-23 23:37:35

解决方案3
1 2014-03-23 23:35:39

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

问题描述

3 个解决方案

解决方案1 5 2014-03-23 23:28:41

解决方案2 4 已采纳 2014-03-23 23:37:35

解决方案3 1 2014-03-23 23:35:39

解决方案1
5 2014-03-23 23:28:41

解决方案2
4 已采纳 2014-03-23 23:37:35

解决方案3
1 2014-03-23 23:35:39