如何將django ajax數據傳遞給模板？

Question

我想通過ajax將2d數組傳遞給模板。我設法從點擊服務器獲取數據，但我不知道如何處理模板內的數據。例如，如果我將返回的'數據'放入一個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來完成。一旦模板在服務器上生成並且該頁面顯示在訪問者Web瀏覽器中，它就不過是帶JavaScript的HTML。爲了操作頁面，你需要使用JavaScript。

Answer 2

Views.py

下面我們正在接收一個AJAX POST並過濾基於「VARID」的對象，並且構建字典每個包含一個OptionID，OptionValue，和OptionLabel值的列表。最後，你應該在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 

由於CSRF的原因需要JavaScript。

<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請求。

要顯示列表中的字典中的值，我們正在迭代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>'); 
        }); 
       } 
       }); 
      }