Javascript 在django中使用ajax的更好方法_Javascript_Python_Ajax_Django

Javascript 在django中使用ajax的更好方法

javascript python ajax django

Javascript 在django中使用ajax的更好方法,javascript,python,ajax,django,Javascript,Python,Ajax,Django,前几天，我为我一直在开发的Django应用程序编写了一些AJAX 我来自RubyonRails，所以我在原始JS方面做得不多因此，基于Rails的部分，我在一种伪代码中使用了类似于以下内容的东西，不用担心细节： 1）使用prototype的Ajax.Updater的JS函数（'tablediv'是我想要Ajaxily更新的表的id，url指向正确的django视图） 2） django视图，该视图获取新数据以填充表： def ajaxTable objects = Objects

前几天，我为我一直在开发的Django应用程序编写了一些AJAX

我来自RubyonRails，所以我在原始JS方面做得不多

因此，基于Rails的部分，我在一种伪代码中使用了类似于以下内容的东西，不用担心细节：

1）使用prototype的Ajax.Updater的JS函数（'tablediv'是我想要Ajaxily更新的表的id，url指向正确的django视图）

2） django视图，该视图获取新数据以填充表：

 def ajaxTable
     objects = Objects.object.all...
     return render_to_response('ajaxtable.html',objects)

3） ajaxtable.html只是一种Rails的“部分”，因此基本上是一个不带代码的表：

   <th>{{object.data}}</th>
   <td>{{object.moredata}}</td>

{{object.data}
{{object.moredata}

所以我的实际问题是：

这对我来说似乎有点骇人听闻，在厌倦了在网上搜索我想要的东西后，我把它拼凑了起来

是这样做的吗？它很好用，我只是知道的不够多，你知道吗？

它到底有什么不对劲的地方？似乎是做某事的一种完全有效的方式

我想另一种选择是使用json并将其发送回javascript代码段

无论如何，您至少需要两件事：

进行调用的javascript代码（您有这个）

处理请求的服务器端代码（这是您的视图和url配置）

这绝对不是什么“黑客”行为

第三件事，模板文件，是可选的，但通常是良好的实践。出于多种原因，您希望将标记与代码分开

所以我认为你的想法是对的。继续。

我想这取决于你想做什么。Ajax是一种非常广泛的场景，从GoogleMaps到简单的自动完成，其复杂性和最佳方法都有很大的不同

但是，您可以做一些有用的事情来帮助您

1）模板级别

确保在模板上下文处理器设置中有“django.core.context\u processors.request”。然后你可以这样做

{% if not request.is_ajax %}
<html>
  <head>
  ...
  </head>
  <body>
  ...
{% endif %}
actual content
{% if not request.is_ajax %}
</body>
</html>
{% endif %}

上面的方法实际上与您的方法没有什么不同，但是允许您重用视图并更简洁地编写它。我不会真的说你所做的是错误的或有问题的，但是你可以编写它使它更简洁，并重用模板和视图

例如，您可以只使用一个模板，如果是Ajax请求，则只返回需要更新的部分。在您的情况下，将是表视图。

我迟到了，但我想记录如何组合和调整在某种程度上，它将解析一个更干净的模板代码

我有一个代表联系人的模型

获取一个联系人的（通用）视图如下所示：

def contcactperson_detail_view(request, name):
    try:
        person = ContactPerson.objects.get(slug=name)
    except:
       raise Http404
    if request.is_ajax():
        return contcactperson_detail_view_ajax(request, person)
    return list_detail.object_detail(
            request,
            queryset = ContactPerson.objects.all(),
            object_id = person.id,
            template_object_name = "contactperson",
        )

@render_to('cms/contactperson_detail_ajax.html')    
def  contcactperson_detail_view_ajax(request, person):
    return {'contactperson':person, 'is_ajax':True}

<h1>{{ contactperson.first_name }} {{ contactperson.family_name  }}</h1>
{% include 'cms/contactperson_detail_photo.html' %}                                                                                                          
{% include 'cms/contactperson_detail_textpane.html' %}

呈现处理一个联系人的视图的模板称为

contcactperson\u detail\u view.html

：

{% extends "index.html" %}
{% block textpane %}

<h1 id="mainheader">{{ contactperson.first_name }} {{ contactperson.family_name  }} </h1>
<div class="indentation">&nbsp;</div> 
{% include 'cms/contactperson_detail_photo.html' %}                                                                                                          
<div id="text_pane">

{% include 'cms/contactperson_detail_textpane.html' %}
</div>
{% endblock %}

如果请求不是ajax，将使用这3个模板

但是如果请求是ajax，

contcactperson\u detail\u view

将返回视图

contcactperson\u detail\u view\u ajax

，该视图使用模板

contactperson\u detail\u ajax.html

进行渲染。该模板如下所示：

def contcactperson_detail_view(request, name):
    try:
        person = ContactPerson.objects.get(slug=name)
    except:
       raise Http404
    if request.is_ajax():
        return contcactperson_detail_view_ajax(request, person)
    return list_detail.object_detail(
            request,
            queryset = ContactPerson.objects.all(),
            object_id = person.id,
            template_object_name = "contactperson",
        )

@render_to('cms/contactperson_detail_ajax.html')    
def  contcactperson_detail_view_ajax(request, person):
    return {'contactperson':person, 'is_ajax':True}

<h1>{{ contactperson.first_name }} {{ contactperson.family_name  }}</h1>
{% include 'cms/contactperson_detail_photo.html' %}                                                                                                          
{% include 'cms/contactperson_detail_textpane.html' %}

希望对一些人有用。如果是，请留下评论

这就是我一直在玩的东西，但当时我对javascript的了解还不如我所知道的那么多，所以只需将对象作为JSON发送，从中生成javascript对象文字，然后tablediv.innerHTML=foo？JSON是一个对象文字，所以在javascript中使用它的好处是，一旦有了它，就不必对它做任何事情来实际使用它。我喜欢将JSON与我上面链接的模板系统（jquery，不是prototype，抱歉）结合使用，因为您只需将返回的JSON直接传递给您设置的模板，它就会工作。很好，感谢您的回复，我完成了项目并继续前进，但从那以后它一直困扰着我（当我在某件事情的中间，我不能停下来问论坛或堆栈溢出……我没有耐心：），很高兴知道我的直觉并不是完全可笑的。这似乎真的很聪明，因为使用了对我有吸引力的嵌入式ruby…可能太聪明了…太聪明了？我真的很喜欢它。你可以快速地完全ajax化一个网站的大部分内容，不幸的是，没有办法让每个模板拥有一个以上的“ajax块”…嗯，我想知道它有多聪明你可以这样做。我相信你可以通过使用一个视图实现一个更简单的解决方案，对于ajax/非ajax使用相同的模板，但根据上下文变量从不同的基础模板继承。请参阅我对这一行中另一个问题的回复

{% with contactperson.photo.detailphoto as pic %} 
    {% with pic.url as pic_url %}    
    <div {% if not is_ajax %}id='imageContainer'{% endif %} style="float: right;padding-right:0.5em; 
                                    padding-bottom: 1em; padding-left:0.5em;clear:both; 
                                    width:{{ pic.width }}px">   
        <div style="width:{{ pic.width}}px">                       
                <img style="clear:both" src="{{ pic_url }}" alt="{{ i.name }}"/> 
        </div>                                                                                                                    
    </div>   
    {% endwith %}
{% endwith %}

<h1>{{ contactperson.first_name }} {{ contactperson.family_name  }}</h1>
{% include 'cms/contactperson_detail_photo.html' %}                                                                                                          
{% include 'cms/contactperson_detail_textpane.html' %}

$("#contact_person_portlet a").click(function(event){
       event.preventDefault();
       $.ajax({
           type: "GET",
           url: event.target.getAttribute('href'),
           success: function(msg){
               overlay(msg);
           }
        });
    });