Saya telah mencoba dengan beberapa cara pemanggilan data url json menggunakan javascript, namun beberapa kali mengalami error permasalahan akses. Namun setelah menemukan pluggin load-more, saya jadi terbantukan. Dalam kasus saya, saya menggunakan backend server menggunakan php, sehingga pemanggilan data akan enak menggunakan php juga, namun agar AJAX dapat bekerja dengan baik perlu bantuan pluggin ini agar dapat mempermudah proses script.
Persiapan
- Pemanggilan data json di php
- Penggunaan Jqueary
1. Pemanggilan Data
Pertama-tama saya perlu memanggil data json yang berupa url.
public function getApi($parameter1, $parameter2)
{
$parameter1= preg_replace('/\s/is', '+', $parameter1);
$url = API_URL_UMUM . $parameter1 .'&mode=json&version=' . $parameter2;
$json = file_get_contents($url);
$ret = json_decode( $json, TRUE );
return $ret;
}
2. Pembuatan komponen html
Pembuatannya tentu saja dengan page, misal ajax.html, yang berbeda dari page yang akan memerlukan fitur ini, misal index.html. Berikut adalah html yang akan dihandel js pada index.html.
<span class="dropdown-item load-more link"
parameter2="tb"
title-version="Foo Bar" >
Foo Bar
</span>
<div id='version-bible'></div>
Bagian ajax.html saya handel foreach data sesuai ajax.php saya
{foreach $api as $items}
<div>{$items.texts.parameter1}:{$item.texts.parameter2}
{/foreach}
3. Komonen Javascript
Setelah disetting plugin nya pada page utama baik css dan js nya. perlu dilakukan set js sesuai komponen. Dalam kasus saya setiap komponen yang memiliki class load-more akan menghandel ajax dari halaman ajax.html
$('.load-more').click(function(){
// replace parameter sesuai keinginan dalam kasus saya spasi saya ganti +, dan parameter sudah didiclare sebelemuny.
let parameter1 = parameter1.replace(' ', '+');
let parameter2= $(this).attr('parameter2');
let title = $(this).attr('title-version');
// Set url api sesuai parameter
let url = baseUrl + 'ajax/api-text.php?parameter1=' + passage1 +'¶meter2=' + parameter2 + '&mode=json';
// handel tindakan yang perlu dalam kasus saya container mau saya bersihkan dan ganti judulnya dengan title
$('#version-con').html('');
$('.title-text').html(title);
// Jalankan load more js nya
$(this).loadMore({
elementId: 'version-con',
containerSelector: '#version-con',
requestUrl: url,
loadingSelector: '#loading-main',
})
// test error
console.log(url);
});
DONE
Top comments (0)