javascript - 使用 ajax 将数据渲染成 html 的最佳实践

Question

我正在尝试在某些已定义的 div 中加载该项目的一些详细信息。我有两种方法可以做到这一点。

注意:我使用 python/django 作为后端，在前端使用 jquery

我。我的第一种方式

Views.py

def get_item_data(id):
    obj = MyClass.objects.get(pk=id)
    html = """
              <div>All Details Here, 1. {0}, 2. {1}</div>
           """.format(str(obj.id), str(obj.name))

    return HttpResponse(html)

myapp.js

$('#myid').on('click', function(){
     $.ajax({
        type: "GET",
        url: GET_DATA,
        data: dataString,
        success: function(res) {
                $('#addl_container').html(res);
        }
    });
});

二。另一种方式

Views.py

def get_item_data(id):
    obj = MyClass.objects.filter(pk=id).values()
    return HttpResponse(simplejson.dumps(obj))

myapp.js

$('#myid').on('click', function(){
     $.ajax({
        type: "GET",
        url: GET_DATA,
        data: dataString,
        success: function(res) {
                $('#addl_container').html(
                   "<div>All Details Here, 1. "+ res.id +", 2. "+ res.name + "</div>"
                );
        }
    });
});

这两个过程都有效。我认为预先创建 html 并加载它可能不是一个好的选择，因为我们使用 python 代码创建 html 然后加载它。如果我尝试从不同的应用程序访问相同的 url，它也不会工作。通过从 json 响应中提取数据从 jquery 创建 html 似乎是一个很好的解决方案，但有时当数据很大时，它需要在用户端使用更多 ram，这会使系统变慢。

我不知道该用哪一个，请从这两个中提出一个更好的解决方案。如果有的话，还建议其他比这更好的解决方案吗？

提前致谢。

Answer 1

我更喜欢把模板、业务、js逻辑尽量分开。它使它在 Django 设计原则中更像 pythonic 和更多。这确实与您的第一种方法非常相似，但使用的是 html 模板，而不是将 html 打印到 View 中的字符串。

View .py

def get_item_data(id):
    template_name = 'index.html'
    obj = MyClass.objects.get(pk=id)
    context = {
        'obj': obj,
    }
    html = render_to_string(template_name, context)
    return HttpResponse(html)

index.html

<h1>{{ obj }}</h1>

我的应用程序.js

$('#myid').on('click', function(){
    $.ajax({
        type: "GET",
        url: GET_DATA,
        data: dataString,
        success: function(res) {
            $('#addl_container').html(res);
        }
    });
});