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

6 投票

3 回答

58057 浏览

数据工程师

提问于 2025-04-17 23:34

我有一个下拉框，里面列出了一些书籍。用户可以选择一本书，然后点击提交按钮，查看该书的章节在另一个页面上。

不过，当用户更改下拉框的选择时，我希望能部分刷新页面，显示用户之前在这本书上写的笔记，并允许用户为这本书写新的笔记。我不想在下一个章节页面上处理笔记的查看和创建，因为那样会显得很乱。

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

目前，当下拉框的选择改变时，会通过ajax调用接收一个包含书籍信息和所有笔记的Json字符串。这个Json字符串接着会通过jQuery.parseJson()转换成一个Json对象。

我想要做的是遍历这些笔记，并渲染出一个包含多个单元格和行的表格。

我需要在jQuery/js中完成这个操作吗（而不是在bottle/template框架中）？我想应该是这样，因为我只想进行部分刷新，而不是完全刷新。

我在寻找一段代码，可以通过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>

ajax json html渲染 web应用 jquery 前端开发笔记管理部分刷新

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

回答于 2025-04-17 由 Python大师

分享举报

这主要取决于你的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，所有标签都要小写。
在最近版本的jQuery中，你不需要使用$(document).ready(function () {...})，可以用$(function () {...} )，这样更简单易读。
如果你只关心成功的状态（就像这里一样），可以用$.get替代$.json。如果你确定你得到的数据是有效的JSON，可以用getJSON替代get。这样它会自动帮你解析JSON，并把它作为JavaScript对象交给你。
在测试时，通常用console.log比用alert更方便。其实，一般来说，使用alert并不是个好主意。

回答于 2025-04-17 由 Python大师

分享举报

我对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”设置。

我还建议你在表单的提交处理函数中执行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(...);
        }
    });
});

这样的话，如果点击提交按钮，它应该能正常工作。

回答于 2025-04-17 由 Python大师

分享举报

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

3 个回答

撰写回答