AJAX JQUERY - cara mendapatkan hasil berupa json

Saya takut anda kurang puas dengan artikel ini, jadi kubuat versi yang berdasarkan permintaan salah satu user. Silakan lihat disana bila anda tak yakin faham tulisan disini (Klik untuk membuka di halaman baru)

Semua itu ada cerita, berawal dari sebuah fakta kecil saat membuat program resep yaitu bagaimana cara melempar data yang kita tulis di kotak resep lalu akan memberikan hasil. Saya menemukan bahwa selain kita mengirim banyak data ke server (via ajax), kita juga bisa mendapatkan multiple data yang dapat dikeluarkan. Mari mulai dari jquery ajax sederhana. Sekedar info, anda bisa klik tulisan yang saya berikan disini.

Oh iya.. saat saya mencoba mencari di BING (karena udah terlalu sering google), saya menemukan bahwa jquery ajax sederhana merujuk pada penggunaan POST. Karena dasarnya saya ingin bahas ke AJAX bukan POST, jadi pembahasan ini memakai AJAX.

Kalau bayi anda suka gigit-gigit. Belikan ini buat melatih giginya

saya kenal ajax sebelum adanya jquery, tetapi saya pakai jquery agar nulisnya juga gak susah-susah amat. Untuk singkatnya, saya akan buat metode sebagai berikut
☻ klik tombol
☻ Keluar Hasil

Kita akan coba bikin pake yang hasil keluarannya cuma 1 saja. Sekedar info klik link terakhir artikel ini untuk dapet file yang kubahas.

AJAX HTML

maksudnya akan mengembalikan tampilan sebagai HTML. Disini tampilan yang diberikan hanya bisa satu saja. Cara pakainya biasanya untuk klik misalnya login, kalau hasil login ok maka dikasi tau bahwa login OK dibagian bawah atau gagal.
Kita akan buat dengan bentuk sebagai berikut

username [.....] [submit] [......]*

*kotak yang akan menjelaskan hasil dari login.

<input type=text id='uname' /> <input type=button value='submit' /> <div id='result'></div>

Anggap kita memasukkan user1 (dimana user1 memang adalah login valid). Maka keluarnya adalah Terima kasih telah login. Scriptnya untuk js

myId=$("#uname").val();
var request = $.ajax({
url: "checkUser.php",
type: "POST",
data: {id : myId},

});

request.success(function(msg) {
  $(".result").html( msg);
});

Untuk script checkUser.php kita pakai

if($_POST['id']=='user1') {
echo "valid";
}else{
echo "tidak valid";
}

Disini kita sudah bisa membuat AJAX sederhana. Walau sebenarnya memakai POST juga sama aja.

AJAX JSON

Saya punya 2 input (div dalah tulisan ini). saat saya menekan tombol jalan (contoh), maka div satu akan berisi tanggal hari ini dan div dua akan berisi jam. Pertama kita mulai dari tampilan awal

<div class='satu'>{bla }</div>
<div class='dua'>{bla }</div>
<button onclick='mulaiAjax()'>click disini</button>
<div id='results'>{result}</div>

Berikutnya saat menekan tombol akan jalan fungsi mulaiAjax() yang berada di script

function mulaiAjax()
{  
    menuId=1;
    var request = $.ajax({
 url: "date.php",
 type: "POST",
 data: {id : menuId},
 dataType: "json"
    });
 
    request.success(function(msg) {
 $(".satu").html( msg.satu );
 $(".dua").html( msg.dua );
});
 
    request.fail(function(jqXHR, textStatus) {
 alert( "Request failed: " + textStatus );
});
 
}

sekedar info, pada jquery terbaru malah pake request.done jadi perhatikan jquery anda
Untuk date.php akan berisi sebagai berikut

$a=array('satu'=>date("d-m-Y"),
'dua'=>date("H:i")
);
echo json_encode($a);

PROSES YANG TERJADI

inilah yang sebenarnya jadi pikiran gw, bagaimana seh perjalanannya. Ternyata prosesnya ngak susah-susah amat.. Kecuali kalau di fungsi success ada perintah check a,b,c!!

♥ Saat gw klik tombol, yang berikutnya terjadi adalah mengirim data POST ke date.php

♣ di date.php akan dapat variable berupa POST.. Simpan data yang akan dikeluarkan dalam bentuk array, kemudian munculkan hasilnya berupa JSON (perhatikan kenapa saya memakai JSON_ENCODE

☻di halaman yang pertama data akan kembali.. hasilnya berupa JSON lebih tepatnya berbentuk array. Untuk mengakses saya cukup memakai nama reference (disini saya pake msg) dan titik nama keynya (satu atau dua)

♠ arahkan pada tempat yang sesuai

Kurasa disini sudah jelas apa yang kuinginkan.. SELAMAT BELAJAR

---

Source:
  code Final. atau INI