Sunday, October 7, 2012

AJAX Callback Dengan JQuery



AJAX callback dengan jQuery, sekarang  kita sampai ke titik. Tutorial ini sangat tidak cocok untuk webdevelopers berpengalaman (atau apa pun yang Anda menyebutnya), tetapi Anda bisa belajar banyak ataupun copy-paste.


Langkah 1: Menghubungkan jQuery
Sertakan perpustakaan jQuery di bagian Anda sebagai berikut (i digunakan versi 1.2.1, tapi ini berubah banyak):

<script type="text/javascript" src="../jquery-1.2.1.js"></script>


Langkah 2: The callback
Selanjutnya, tambahkan fungsi ini JavaScript untuk. Di fungsi ini, semua "keajaiban" yang terjadi:
function addNumbers() {
     var number1 = $('#number1').attr('value');
     var number2 = $('#number2').attr('value');
     $.get("giveMeSomething.php", { number1: number1, number2: number2 },
         function(data){
            alert("Data Loaded: " + data);
     });
}

Sejalan 2 kita mendapatkan calue dari field pertama di halaman kami. Variabel ini digunakan dalam baris 4 lagi di callback AJAX. Di baris 3, kita melakukan hal yang sama untuk kolom kedua. Sejalan 4 sampai 7 adalah callback AJAX sebenarnya. Aku meletakkan fungsi ini pada beberapa baris untuk dibaca, tetapi Anda bisa menempatkannya pada satu baris jika Anda suka.

Parameter pertama adalah file yang ingin melakukan panggilan pada. Hal ini bisa PHP atau apa pun. Saya membuat file dalam direktori yang sama seperti file HTML, yang disebut "giveMeSomething.php". Di file ini, semua tindakan yang dilakukan (lihat langkah 4). Parameter kedua (antara kurung keriting) berisi semua nilai yang Anda ingin lolos ke file PHP. Nilai-nilai yang dipisahkan koma bij ini. Kiri: adalah nama dari variabel dalam file PHP, dan kanan: adalah nilai (dalam hal ini vars Anda didefinisikan di baris 2 dan 3).

Akhirnya kita mendefinisikan sebuah fungsi yang dijalankan setelah selesai callback. Data Anda mendapatkan (dan tampilan dalam peringatan) adalah segala sesuatu yang gema-ed dalam file PHP.

Langkah 3: Formulir
Tambahkan field input ke:
<input type="text" id="number1" value="0" /> + <input type="text" id="number2" value="0" />
<input type="button" onclick="addNumbers();" value="=" />


Langkah 4: file PHP
Buat file PHP baru dengan nama "giveMeSomething.php" dan konten ini:
<?
echo $_REQUEST['number1'] + $_REQUEST['number2'];
?>