Cara Membuat Load More Dengan Ajax Javascript

Hallo teman-teman Dumet School. Kembali lagi dengan saya di Kursus Web Design. Kali ini saya akan membahas tentang Cara Membuat Load More Dengan Ajax Javascript. Yang dimaksud dengan load more adalah suatu animasi untuk membuat pagination dengan cara melakukan klik pada suatu elemen maka tampilan data akan bertambah dengan jumlah tertentu tanpa harus mereload halamannya.

Untuk dapat mengetahui Cara Membuat Load More Dengan Ajax Javascript teman-teman bisa mulai dari membuat fungsi ajax javascript dengan beberapa parameter. Berikut ini scriptnya ya teman-teman.

// FUNCTION AJAX
function load_ajax(method, url, data = null, callback) {
  const ajax = new XMLHttpRequest()
  ajax.open(method, url, true)
  let _params = ""

  if(method == 'POST' && data != null) {
    _params = data
  }

  ajax.onreadystatechange = function() {
    if(this.readyState === 4 && this.status === 200) {
      callback(this.responseText)
    }
  }

  ajax.send(_params)
}

Jika sudah maka kita buat function load_ajax(), teman teman buat function app.show untuk mengisi parameternya. Dan berikut ini scriptnya ya teman-teman. Bisa teman-teman salin.

let app = {
  show: function(value){
    load_ajax('GET', 'app/database.php', null, function(data) {
      generate_post(data, value)
    })
  }
}
app.show()

Dan parameter dari callback ajaxnya sebagai berikut.

function generate_post(data, limit){
  if(limit == null){
    limit = 2;
  }
  let elemen = document.getElementById("posts");
  elemen.innerHTML = "";
  let respon = JSON.parse(data);

  for(i=0; i<limit; i++){
    elemen.innerHTML += `<tr>
                          <td>${i+1}</td>
                          <td><span class="editdata" data-id="${respon[i].id}" data="title">${respon[i].title}</span></td>
                          <td><span class="editdata" data-id="${respon[i].id}" data="body">${respon[i].body}</span></td>
                        </tr>`;
  }
  elemen.innerHTML +=  `<tr>
                          <td colspan="4"><input type="submit" class="btn btn-sm btn-success form-control" id="more" value="Load More" /></td>
                        </tr>`;
  let more = document.querySelector("#more");
  loadMore(more);
}

Teman-teman jangan lupa buat file database.php di dalam folder app, dimana isinya adalah perintah untuk mengambil semua data untuk ditampilkan dengan menggunakan php. Dan Langkah terakhir kita buat event klik untuk membuat load more. Dimana ketika kita klik otomatis data yang tampil akan bertambah karena pada function generate_posts batas dari loopingnya saya buat dinamis. Dan berikut ini adlah event klik untuk load more ajax javascript.

// LOAD MORE
var limit = 2;
function loadMore(elem){
  elem.onclick = function(e){
    e.preventDefault();
    limit+=2;
    app.show(limit);
    searching(limit);
  }
}

Demikian artikel tentang Cara Membuat Load More Dengan Ajax Javascript. Semoga dapat bermanfaat dan selamat mencoba ya.