2012-07-07 67 views
0

我试图在两部分中加载页面。当用户点击“显示详细信息”在Django模板中处理ajax和jquery

<script> 
$(document).ready(function(){ 
    $('#toggle_details').click(function(e){ 
     e.preventDefault(); 
     if ($(this).hasClass('up')){ 
      $(this).removeClass('up').addClass('down'); 
      $('#toggle_text').html('Show More Details'); 
     } 
     else { 
      $(this).removeClass('down').addClass('up'); 
      $.ajax({ 
       url: 'some_url_returning_json', 
       data: $(this).serialize(), 
       processData: false, 
       dataType: "json", 
       success: function(data) { 
        $('.name').html(data.name); 
        $('.lname').html(data.lname); 
        alert(data.name); 
       } 
      }) 
      $('#toggle_text').html('Hide Details'); 
     } 
     $('#details').slideToggle("slow"); 
     return false; 
    }); 
    $('#details').hide(); 
});  
</script> 

第二部分只渲染和我的HTML是:

<div class="ad-grp-tbl creative-tbl custom-tbl"> 
    <table width="100%"> 
     <tr> 
      <th>Status:</th> 

      <td id='status'>{{ status }}</td> 
     </tr> 
    </table> 
    <table width="100%" id="details"> 
     <tr> 
      <th>Name:</th> 
      <td id="name" >{{data.name}}</td> 
     </tr> 

     <tr> 
      <th>Last Name:</th> 
      <td id ="lname">{{ data.lname}}</td> 
     </tr> 
    </table> 
    <table> 
     <tr> 
      <th class="tog"> 
       <span id="toggle_text" style="color:blue;font-weight:bold">Show More Details</span> 
       <span class="down" id="toggle_details"></span> 
      </th> 
      <td></td> 
     </tr> 
    </table> 
</div> 

所以基本上我不能够在模板中加载JSON返回值。 hw我可以修复它。或者我解决问题的方法是错误的。

谢谢。

+0

你错过了';' ajax方法的分号 – 2012-07-07 06:30:48

回答

0

Ajax + JQuery将得到响应,并且应该在页面中正确放置数据。原始页面的模板没有太多的作用。

但是,您必须实现单独的url + view +模板来处理ajax请求。您可以使用现有的视图,但需要处理ajax请求(即只发送部分html,可能使用其他模板)。

ajax响应模板应该只发送html的相关部分而不是整个html页面。

0

在HTML中,您设置了ids但您正在使用类选择器。

它应该是:而不是

$('#name').html(data.name); 
$('#lname').html(data.lname); 

$('.name').html(data.name); 
$('.lname').html(data.lname); 

.是类选择和#是id选择。

您可以尝试使用Firebug或Chrome开发工具来查看上述内容是否返回项目。

1

我告诉你一个例子:

def post_ajax(request): 
    TOTLE = 5 
    OFFSET = int(request.GET.get('offset', 0)) 
    END = OFFSET + TOTLE 

    if OFFSET + 1 >= Post.objects.count(): 
     LOADED = "已经全部加载完毕" 
     return HttpResponse(LOADED) 
    posts = Post.objects.filter(pub_time__lte=timezone.now())[OFFSET:END] 

    json_list = [] 
    for post in posts: 
     t = get_template('blog/ajax_post.html') 
     html = t.render(Context({'post': post})) 
     # print(html) 
     json_list.append({ 
      'html': html, 
     }) 
    data = json.dumps(json_list) 
    return HttpResponse(data, content_type="application/json") 

这是你需要什么?