在Ajax请求之后返回用于模板呈现的Django模型

Question

我想为我的网页创建一个基于AJAX的搜索。到目前为止，我能够发送表单数据并对我的Django模型进行适当的调用。我遇到的困难是只发送QuerySet并使用Django模板系统呈现它。非常感谢您的帮助/建议。

这是我正在使用的代码。

views.py

if request.is_ajax(): 
    if request.method == 'POST': 
     format = 'json' 
     mimetype = 'application/json' 
     try: 
      q = request.POST['obj'] 
      o = Object.objects.filter(name__icontains=q) 
      return render_to_response('project_view_objects.html', {'username': request.user.username, 'results':o}) 

view.html

<script> 
    $(document).ready(function(){ 

    $("#search_form").submit(function(event) 
    { 
     event.preventDefault(); 


     $.ajax({ 
      type: "POST", 
      url: "/objects/search/", 
      data: $(this).serialize(), 
      processData: false, 
      dataType: "json" 
      }); 
    });}); 
</script> 

<article> 
    <blockquote> 
     <form class="create_form" id="search_form"> 
      <p> 
       <input id="objectSearchNameInput" type="text" name="obj" value="Object name"> 
       <input type="submit" value="search objects"> 
      </p> 
     </form> 
    </blockquote> 
</article> 
<br /> 

{% if results %} 
<blockquote> 
    <aside class="column"> 
     {% for object in results %} 
      <b><a href="#" class="extra-text-special">{{ object.name }}</a></b><br /> 
     {% endfor %} 
    </aside> 
    <aside class="column"> 
     {% for object in results %} 
      <font class="extra-text-nospecial">{{ object.created_when }}</font><br /> 
     {% endfor %} 
    </aside> 
</blockquote> 
{% else %} 
    <p>haha</p> 
{% endif %} 

目前，我所看到的页面上显示的是 '哈哈'。

Answer 1

你遗漏的是，模板已经在AJAX被触发时渲染 - 当然它必须是，因为模板是服务器端的，JavaScript是客户端。

所以要做的事情是让你的Ajax视图不返回JSON，但是呈现模板，然后你的Javascript回调会插入到模板中。

Answer 2

我的解决方案是使用Dajax，为例如渲染列表创建小片段模板。然后在Dajax函数中渲染它们，并用适当的javascript调用将它们写入文档。你可以看到一个例子（实际上dajax的所有文件是相当不错）： http://www.dajaxproject.com/pagination/

，我最近发现（但还没有尝试过我自己）另一种解决方案是： http://www.jperla.com/blog/post/write-bug-free-javascript-with-pebbles

最后你可能会去完全是另一种方式并使用Backbone.js，但是这样（或多或少）你最终会遇到同样的问题，如何与django模板共享主干模板（我认为你应该能够编写一个模板标签，在'模式'写一个值，或骨干模板标签，从而允许您重新使用您的模板）

Answer 3

这是最终的答案

蟒蛇

if request.is_ajax(): 
    if request.method == 'POST': 
     format = 'json' 
     mimetype = 'application/json' 
     try: 
      q = request.POST['obj'] 
      #message = {"object_name": "hey, you made it"} 
      o = Object.objects.filter(name__icontains=q) 
     except: 
      message = {"object_name": "didn't make it"} 
     #m = str(q['id']) 
     #json = simplejson.dumps(message) 
     #data = serializers.serialize(format, o) 
     #return HttpResponse(data, mimetype) 

     html = render_to_string('results.html', { 'username': request.user.username, 'objects': o }) 
     res = {'html': html} 
     return HttpResponse(simplejson.dumps(res), mimetype) 

HTML

<script> 
    $(document).ready(function(){ 

    $("#search_form").submit(function(event) 
    { 
     event.preventDefault(); 

     $.ajax({ 
      type: "POST", 
      url: "/objects/search/", 
      data: $(this).serialize(), 
      processData: false, 
      dataType: "json", 
      success: function(data){ 
        $('#results').html(data.html); 
       } 
      }); 
    });}); 
</script> 

。 。 。

<article> 
    <blockquote> 
     <form class="create_form" id="search_form"> 
      <p> 
       <input id="objectSearchNameInput" type="text" name="obj" value="Object name"> 
       <input type="submit" value="search objects"> 
      </p> 
     </form> 
    </blockquote> 
</article> 
<br /> 
<aside id="results"> 
</aside>