Ajax JQuery请求和响应从Django模板

Question

根据jro建议我正在修改我的问题和我有问题。

== URL ==

url('^$','pMass.views.index', name='index') #Index is the main view with form input type text and submit 
              #If search value is match then it will render result.html template 

== VIEW ==

#View will find search value and render result.html template if request is not ajax 
#If request is ajax then same view will create new queryset and render to same template page (result.html) 

def index(request): 
    error = False 
    cid = request.GET 

    if 'cnum' in request.GET: 
     cid = request.GET['cnum'] 

    if not cid: 
     error = False 
     expcount = Experiment.objects.count() 
     allmass = SelectedIon.objects.count() 

    if request.is_ajax(): 
     value = request.GET.get('value') 
     if value is None: 
      result = SelectedIon.objects.filter(monoiso__iexact=value).select_related() 
      template = 'result.html' 
      data = { 
       'results':result, 
      } 
      return render_to_response(template, data,   
      context_instance=RequestContext(request)) 

    else: 

     defmass = 0.000001 
     massvalue = float(cid) 
     masscon = defmass * massvalue 
     highrange = massvalue + masscon 
     lowrange = massvalue - masscon 

     myquery = SelectedIon.objects.select_related().filter(monoiso__range=(lowrange, highrange)) 
     querycount = myquery.count() 

     return render_to_response('result.html', {'query': cid, 'high':highrange, 'low':lowrange, 'sections':myquery, 'qcount':querycount, }) 

    return render_to_response('index.html', {'error': error, 'exp': expcount,'mass':allmass,}) 

== result.html ==

# I have divided template into two container: main (left) & container (right) 
# Left container is for search match (e.g value/title) with hyperlink 
# Right container is for detail of the match value 
# For right container I have created jQuery tabs (tab1, tab2, tab3) 
# The content of the right container in the tab will update according to the link in the left. 
#Layout is given below 

       ! tab1 ! tab2 ! tab3 !    
-------------------------------------------------------------------------    
! 434.4456 ! Show Default Match 1 Record       ! 
! 434.4245 ! & left hyperlink onclick show it's value record  ! 
! 434.4270 ! detail. I have design tab with JQuery     ! 
! 434.2470 !              ! 
! 434.4234 !              ! 
------------------------------------------------------------------------- 

==左容器（result.html）==

#I am looping through the queryset/list of values that was match with template for tag 
#The template variable is given a hyperlink so after clicking it's detail information 
will be shown on right container 

<script type="text/javascript" src="/media/jquery-1.2.6.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#a.id').click(function(){ 
     value = $ ('a.id').val(); 
     $('div#tab_content')empty().load('{%url index%}?query'= +value); 
     }); 
    }); 

<div id="main"> 
    <table align="center" cellspacing="0" cellpadding="4" border="1" bordercolor="#996600"> 
      <tr> 
       <th>Match</th> 
      </tr>  
       {% for section in sections %} 
      <tr> 
       <td><a href="#" id="{{%section.monoiso%}}">{{section.monoiso}}</a></td> 
      </tr> 
       {% endfor %} 
     </table> 
</div> 

== 问题 ==

• 我不知道如何让超级链接的价值！
• 上的超链接（左容器）的jQuery Ajax请求不工作
• 我不知道有关加载索引视图从result.html是正确的
• 我从超链接与<a href.... id="{{%section.monoiso%}}"将数据发送到服务器，我怎样才能使用相同的ID值查询索引视图和响应在result.html？
• 如何在正确的容器中呈现响应？

建议，意见和解答赞赏。

Answer 1

一些起点。首先，您通过Ajax调用的视图不一定必须返回json对象：数据也可以使用django.http.HttpResponse（或render_to_response，归结为相同的事情）作为字符串返回。这意味着您也可以照常返回完全生成的模板。

假设你发布观点以/index/(?<tab>\d+)/(?<match>\d+)/（tab作为标签索引，match是配建指标）被发现，你的JavaScript看起来是这样的：

$("ul.tabs li").click(function() { 
    $("ul.tabs li").removeClass("active");  // Remove any "active" class 
    $(this).addClass("active");    // Add "active" class to this tab 
    $(".tab_content").hide();     // Hide all tab content 

    // Construct the url based on the current index 
    match_name = $("ul.match li").index($("ul.match li.active")); 
    url = "/index/" + $("ul.tabs li").index($(this)) + "/" + match_name + "/"; 

    // Asynchronous ajax call to 'url' 
    new $.ajax({ 
     url: url, 
     async: true, 
     // The function below will be reached when the request has completed 
     success: function(transport) 
     { 
      $(".tab_content").html(transport); // Put data in the div 
      $(".tab_content").fadeIn();  // Fade in the active content 
     } 
    }); 
}); 

我没有测试这一点，但沿东西这些线应该做的。请注意，为了与您当前的代码一起工作，您查看的index函数需要允许参数。如果你只是想用每个标签页的相同页面进行测试，请使url如下所示：url = "/index/";，这样它很可能会立即工作。