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/";，這樣它很可能會立即工作。