如何通过 AJAX 调用使用 jQuery 渲染 HTML答案

【问题标题】：How to render HTML with jQuery from an AJAX call如何通过 AJAX 调用使用 jQuery 渲染 HTML
【发布时间】：2014-05-01 03:45:11
【问题描述】：

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

但是，当用户更改选择框时，我希望部分页面刷新以显示用户在书中输入的过去笔记，并允许用户为该书写新笔记。我不希望在带有章节的下一页上完成对特定书籍的评论和创建笔记，因为它会使它变得混乱。

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

Currently, when the select box is changed, an ajax call receives a Json string containing the book information and all the notes.这个json字符串然后通过jQuery.parseJson()转换成json对象。

然后我希望能够循环遍历笔记并呈现一个包含多个单元格和行的表格。

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

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

<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>

【问题讨论】：

标签： javascript jquery python html ajax

【解决方案1】：

我不熟悉 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()时：

“类型”设置默认为“获取”，但我更喜欢明确设置。
使用 ajax 调用的“数据”设置来指定 URL 参数。
始终指定“dataType”设置。

我还建议您在表单的提交处理程序中执行 ajax 调用，并为提交表单的选择添加一个更改处理程序。

$(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(...);
        }
    });
});

这样你的提交按钮在被点击时应该可以工作。

【讨论】：

【解决方案2】：

这在很大程度上取决于您的 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 通常是个坏主意。

【讨论】：

【解决方案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 id="select_id"></select>

更新参考。无论如何，希望这会有所帮助。它应该可以工作，但如果没有您的特定代码，我将无法测试；)

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

【讨论】：