ajax Загрузите 2 записи при каждом нажатии кнопки «загрузить больше»

Question

Я хочу загрузить 2 записи каждый раз, когда нажата кнопка «загрузить больше» с помощью ajax-вызова и данных JSON.

До сих пор я мог загружать одну запись за раз.

Вот мой код:

var loadMoreBtn = $('.load_more'); 
    function loadData() { 
     var xmlhttp = new XMLHttpRequest(); 
     var url = "jsondata.php"; 
     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       var obj = JSON.parse(xmlhttp.responseText); 
       var counter = 0; 
       loadMoreBtn.on('click', function() { 
        if (counter <= obj.length) { 
         var out = ''; 
         out += '<ul>'; 
         out += '<li>' + obj[counter]['firtsname'] + ' ' + obj[counter]['lastname'] + '</li>'; 
         $("#results").append(out + '<br/><br/>'); 
         counter++; 
        } 
        if (counter >= obj.length) { 
         loadMoreBtn.attr('disabled', 'disabled') 
        } 
       }); 
      } 
     }; 

     xmlhttp.open("GET", url, true); 
     xmlhttp.send(); 
    } 

    loadData(); 

Я буду признателен за любую помощь!

Answer 1

var loadMoreBtn = $('.load_more'); 
    function loadData() { 
     var xmlhttp = new XMLHttpRequest(); 
     var url = "jsondata.php"; 
     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       var obj = JSON.parse(xmlhttp.responseText); 
       var counter = 0; 
       loadMoreBtn.on('click', function() { 
        //repeat load 'one' two times :) it will load two item if item exists. 
        for(i =0; i<2; i ++){ 
         if (counter <= obj.length) { 
         out = ''; 
         out += '<ul>'; 
         out += '<li>' + obj[counter]['firtsname'] + ' ' + obj[counter]['lastname'] + '</li>'; 
         $("#results").append(out + '<br/><br/>'); 
         counter++; 
         } 
         if (counter >= obj.length) { 
         loadMoreBtn.attr('disabled', 'disabled') 
         } 
        } 
       }); 
      } 
     }; 

     xmlhttp.open("GET", url, true); 
     xmlhttp.send(); 
    } 

    loadData();