Как передать данные django ajax в шаблон?

Question

Я пытаюсь передать 2d-массив в шаблон через ajax. Мне удалось получить данные с сервера по клику, но я не знаю, как я могу обрабатывать эти данные внутри шаблона. Например, если я поместил возвращенные «данные» в div, он просто перечисляет первый столбец. Как получить доступ к определенным данным с, например:

{% for printers in printer_list %} 
    {{ printer.email }} 
{% endfor %} 

Javascript:

$(".printersToggle").click(function() { 
    $.get("/ajax", function(data) { 
     /* What goes here? */ 
    }); 
}); 

views.py:

def ajax_test(request): 
    if request.is_ajax(): 
     printer_list = User.objects.all() 
    else: 
     printer_list = "Not ajax" 
    return HttpResponse(printer_list) 
    # Am I doing this bit right? 

urls.py:

url(r'^ajax$','website.views.ajax_test'), 

Answer 1

Это имеет выполняется с помощью javascript. Как только шаблон создается на сервере, и страница отображается в веб-браузере посетителей, это не что иное, как HTML с JavaScript. Чтобы управлять страницей, вам нужно использовать JavaScript.

Answer 2

Views.py

Ниже мы получение AJAX POST и фильтрация объекта на основе «VarID», и создание списка словарей, каждый из которых содержит значение OptionID, OptionValue и OptionLabel. Наконец, вы должны преобразовать любой список или dict или комбо, которые вы хотите в json.

def currentoptions(request): 
     if request.is_ajax(): 
      currentOptions = Option.objects.filter(VariableID=int(request.POST['VarID'])) 
      response = [] 
      for i in currentOptions: 
       vallabel = {} 
       vallabel['OptionID'] = i.id 
       vallabel['OptionValue'] = i.Value 
       vallabel['OptionLabel'] = i.Label 
       response.append(vallabel) 
      json = simplejson.dumps(response) 
      return HttpResponse(json, mimetype="text/json") 
     else: 
      pass 

Javascript необходимо по причинам CSRF.

<script type="text/javascript"> 
jQuery(document).ajaxSend(function(event, xhr, settings) { 
    function getCookie(name) { 
     var cookieValue = null; 
     if (document.cookie && document.cookie != '') { 
      var cookies = document.cookie.split(';'); 
      for (var i = 0; i < cookies.length; i++) { 
       var cookie = jQuery.trim(cookies[i]); 
       // Does this cookie string begin with the name we want? 
       if (cookie.substring(0, name.length + 1) == (name + '=')) { 
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
        break; 
       } 
      } 
     } 
     return cookieValue; 
    } 
    function sameOrigin(url) { 
     // url could be relative or scheme relative or absolute 
     var host = document.location.host; // host + port 
     var protocol = document.location.protocol; 
     var sr_origin = '//' + host; 
     var origin = protocol + sr_origin; 
     // Allow absolute or scheme relative URLs to same origin 
     return (url == origin || url.slice(0, origin.length + 1) == origin + '/') || 
      (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') || 
      // or any other URL that isn't scheme relative or absolute i.e relative. 
      !(/^(\/\/|http:|https:).*/.test(url)); 
    } 
    function safeMethod(method) { 
     return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); 
    } 

    if (!safeMethod(settings.type) && sameOrigin(settings.url)) { 
     xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken')); 
    } 
}); 
</script> 

Javascript для конкретного запроса AJAX.

Чтобы отобразить значения из dicts в списках, мы повторяем возвращаемые данные об успешности запроса AJAX. Функции JS выполняются с помощью jQuery.

function AddOptions(VarID){ 
      $.ajax({ 
       type:"POST", 
       url:"{% url builder.views.currentoptions %}", 
       data: {VarID: VarID}, 
       success: function(data){ 
       $('#OptionTable > tbody > tr').remove(); 
        $.each(data, function(index) { 
        $('#OptionTable > tbody:last').append('<tr id=Option_'+data[index].OptionID+'><td>'+data[index].OptionValue+'</td><td>'+data[index].OptionLabel+'</td><td><a href="#" onClick="deleteOption('+data[index].OptionID+')"><i class="icon icon-remove"></i></a>'); 
        }); 
       } 
       }); 
      }