使用 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逻辑分开。它使它更加pythonic并且更多地符合django设计原则。这确实与您的第一种方法非常相似，但使用的是 html 模板，而不是在您的视图中将 html 打印到字符串。

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

myapp.js

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

Answer 2

非常粗略的草图，来自我实际使用的，即Handlebar：

在 Django 模板中。 头部：

<!--Handlebar templates start-->
{% include "app/mydiv.handlebars.html" %}
<!--Handlebar templates end-->

app/mydiv.handlebars.html

{% verbatim %}
<script id="template-myapp-my-div" type="text/x-handlebars-template">
<div>All Details Here, 1.{{res.id}} res.id, 2. {{res.name}}</div>
</script>
{% endverbatim %}

在 JS 中是这样的：

_success = function(json_data_from_response) { 
var templateSource = $("#template-myapp-mydiv").html();
if (!templateSource) {
    $("#errors").html("template-myapp-mydiv:error:no template found");
    return;
}
// you could compile ahead of time elsewhere or cache the compile.
var template = Handlebars.compile(templateSource);

// now merge your incoming data.
var myhtml = template(json_data_from_response);
$("#addl_container").html(myhtml);
);

我没有详细介绍 Handlebars 模板的详细信息，但它们与 Django 模板有 80% 的相似性，只是去掉了标签和过滤器，所以你应该很容易。

使用 Handlebars 的另一个好处是它可以在客户端提供 sprintf/python 类型的字符串替换。有点重量级的用途，但如果你有它的话......

//compute an actual url on the fly from a template (i.e. depending on
//what the user clicked on, I compute what to fetch)

var _url = _settings.url_details_base;
var t_url = Handlebars.compile(_url);
var url = t_url({"CREF": CREF,"rdbname" : rdbname});

//do something with url, like an Ajax call.