ajax每次點擊「加載更多」按鈕時加載2條記錄

Question

我想每次使用ajax調用和JSON數據點擊「加載更多」按鈕時加載2條記錄。

到目前爲止，我能夠一次加載一條記錄。

這裏是我的代碼：

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();