Ajax JQuery запрос и ответ от Джанго шаблона

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 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/";, чтобы он, скорее всего, сразу заработал.