Django 프로젝트의 AJAX 호출 : 목록에서 다음 항목 3 개로드 중

Question

나는이 ajax 호출에 붙어 있습니다. 내가 뭘 하려던 건 내 프로젝트의 django 뷰 파일에서 ajax 호출 (return_data, item_list라고도 함)에서 반환 된 데이터에서 데이터를 가져 오는 것이 었습니다. 항목은 내가 입력 한 장고 모델 모듈의 코드로 인해 알파벳순으로 가져옵니다. Django를 처음 접했을 때 내 문제는 "show more button"을 클릭하고 return_data/item_list 목록의 다음 3 개 항목을주고 페이지에로드하는 아약스 호출을 얻는 것입니다. 누군가 이렇게 할 수있는 방법을 무너 뜨릴 수 있습니까? 미리 감사드립니다. 이 같은

$(document).ready(function() { 
    var config = { 
     type: 'GET', 
     url: SUBMIT_URL, //written in script tags in template , var SUBMIT_URL = "{% //url 'get_next_concepts' %}" 
     data: { 

     }, 
     dataType: 'html', 
     success: function (return_data, textStatus_ignored, jqXHR_ignored) { 
      alert("The AJAX call worked!" + return_data); //Just checks to make sure  
//data I need is returned 
     } 
    }; 
    $("#showmore").click(function() { 
     $.ajax(config); 
     $("table").append("<tr></tr>"); 
     for (var i = 0; i < 3; i++) { 
      var itemdescription = return_data.index(i).description; 
      var icon = return_data.index(i).icon; 
      var itemName = return_data.index(i).icon; 
      $("table tr:last").append(
        generateCard(itemName, 
          itemdescription, 
          icon)); 
     } 
    }); 

function generateCard(itemNameC, descriptionC, iconC) {  // Function to make card 
    //containing item information (name, icon and description 
var card = "<td class='tablecells'><a class='tabletext' href='#'><span class='fa " 
     + iconC 
     + " concepticons'></span><h2 class='header'>" 
     + itemNameC 
     + "</h2><p>" 
     + descriptionC 
     + "<span class='fa fa-chevron-circle-right'></span></p></a></td>"; 
return card; 
} 

Answer 1

아마 뭔가 :

var indexLast = 0; 
$("#showmore").click(function() { 
    $.ajax({ 
     type: 'GET', 
     url: SUBMIT_URL, 
     data: { 
      indexStart: indexLast //you'll need you backend to take this index and get the next 3 items from the list starting at this index count, so first time, get first 3, second call you would need to get 3-5, 6-9, etc 
     }, 
     dataType: 'html', 
     success: function (return_data, textStatus_ignored, jqXHR_ignored) { 
      indexLast += 3; //add 3 to the index 
      // Now Use the Data here, or save to a variable and use elsewhere. 
      // if your sever simply returns the table formated data already you can just call your jQuery.append(return_data) and your done. 
     } 
    }); 

});