Livro/resumo sobre notas de estudo da tecnologia jQuery e AJAXDescrição completa
jqueryDeskripsi lengkap
Full description
Entri, Edit, Delete, Tampil Dengan PHP Dan Ajax JQueryDeskripsi lengkap
¿Cómo Enviar Un Archivo Por Ajax de #Jquery
Description complète
Seguridad ajax
Seguridad ajaxDescripción completa
ajax
Descripción completa
Descripción: Seguridad ajax
Descripción completa
Ajax HandbookFull description
aaaaa
Tutorial jQuery Ajax Bagian 1 14:25 02 Sep 2010 @Ajax
Pada tulisan sebelumnya mengenai Pengenalan jQuery, jQuery, kita telah mengenal apa dan bagaimana jquery. Saatnya kita mempelajari lebih lanjut bagaimana membuat aplikasi Ajax menggunakan jQuery. Library jQuery mempunyai fungsi-fungsi khusus untuk pembuatan Ajax. Dengan menggunakan jQuery, kita dapat melakukan request data TXT, HTML, XML, PHP bahkan JSON dari server menggunakan metode GET atau POST. Salah satu fungsi yang disediakan oleh jQuery yang berkaitan dengan Ajax adalah fungsi load(). Fungsi load() berfungsi untuk mengambil data dari server dan menempatkannya ke dalam elemen HTML. Sintaks : $(selector).load(url,data,callback)
Parameter url adalah alamat atau nama file di server yang akan kita ambil atau panggil Parameter data bersifat opsional, adalah pasangan key dan value yang dikirim ke server. Parameter callback bersifat opsional, adalah fungsi yang dieksekusi jika data diambil. Contoh :
Misal kita punya file data.txt, yang isinya : Hai ini adalah konten dari file data.txt
Lalu kita buat kode ajax untuk me-load konten dari data.txt, berikut contoh kode contohload.html 1 2 3 <script type="text/javascript" src="jquery.js"> 4 <script type="text/javascript"> 5 $(document).ready(function(){ 6 $("#tombol").click(function(){ 7 $('#teks').load('data.txt'); 8 }); 9 10}); 10}); 11 11 12 12 13 13 14
15 16
16
17 18 19 view plain | print | ? Dari contoh di atas, pertama-tama kita ambil file jquery.js dapat kamu download di www.jquery.com atau di sini. Apabila kita mengklik tombol Klik Ini, maka akan segera menjalankan fungsi load file data.txt dan memasukkannya ke dalam innerHTML
. Sekarang mari kita lihat contoh jika memanggil file berupa PHP dan mengirim kan beberapa data atau parameter untuk diolah di sisi server. contohload2.html
20 21 22 view plain | print | ? Pada contoh di atas kita melakukan request ke server untuk memanggil file PHP data.php dan mengirimkan parameter-parameter dan nilainya dengan metode GET. Kemudian meng-eksekusi fungsi beritahu(). Berikut kode PHP data.php 1 ?php
2 cho "Anda mengirim parameter nama dengan nilai : ".$_GET['nama']."
"; 3 cho "Email : ".$_GET['email']."."; 4?>
Tutorial jQuery Ajax Bagian 2 (Input, Update, Delete, Animasi Loading) 17:08 20 Oct 2010 @Ajax
Pada artikel sebelumnya kita telah belajar dan mengenal jQuery dan penggunaan fungsi load() di Tutorial jQuery Ajax Bagian 1. Sekarang kita lanjutkan tutorial ajax jquery, yaitu bagaimana menginput, mengupdate, mendelete data di database, kemudian bagaimana caranya menampilkan animasi loading ajax menggunakan jquery. Di sini kita akan mempelajari fungsi jQuery.ajax()
Sekarang mari kita mulai membuat kode-kodenya
jQuery.ajax() Sintaks : $.ajax(settingan)
Fungsi : untuk melakukan asynchronous HTTP (Ajax) request.
Berikut adalah beberapa settingan penting untuk fungsi $.ajax() type
Yaitu tipe metode request data, yaitu POST atau GET, defaultnya adalah GET
url
String yang merupakan URL atau file di server, tujuan kita mengirim request data
Data yang ingin kita kirim ke server untuk diproses, cara penulisannya "data1=value1&data2=value2" cache
Bisa bernilai true atau false. Jika bernilai false, data yang direquest tidak akan dicache oleh browser success Fungsi yang kita jalankan jika request telah sukses dijalankan Untuk settingan lainnya bisa dilihat di http://api.jquery.com/category/ajax/ Contoh : $.ajax({ url: "proses.php", data: "[email protected]&sex=Male", cache: false, success: function(msg){ $("#teks").html(msg); } });
Aplikasi Input, Update dan Delete Sekarang mari kita buat aplikasi sederhana menggunakan jquery dan PHP untuk pemrosesan di sisi server. Pada contoh-contoh yang akan saya berikan, kita akan banyak menggunakan fungsifungsi jquery seperti val(), html(), show(), hide() dan lainnya. Untuk tutorial mengenai fungsi tersebut, silahkan baca di pengenalan jquery. Pada contoh berikut kita akan membuat aplikasi data karyawan Struktur Tabel datakaryawan di MySQL
Pertama mari kita buat dulu tabel datakaryawan di database MySQL CREATE TABLE `datakaryawan` ( `nik` varchar(10) NOT NULL, `nama` varchar(50) NOT NULL, `email` varchar(50) NOT NULL, `alamat` varchar(200) NOT NULL, PRIMARY KEY (`nik`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1; INSERT INTO `datakaryawan` (`nik`, `nama`, `email`, `alamat`) VALUES ('FI786578', 'Bagaskara Antara', '[email protected]', 'Jakarta'),
Mari kita mulai membuat kode HTML dan jQuery, buat file html, kita beri nama index.html. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
Ajax jQuery by Desrizal <script type="text/javascript" src="jquery-1.4.3.min.js"> <script> var nik; var nama; var email; var alamat; var datanya; $(document).ready(function(){ //meloading option NIK dari database $("#nik").load("proses.php","op=ambiloption"); //jika ada event onchange ambil data dari database $("#nik").change(function(){ //ambil nilai nik dari form nik = $("#nik").val(); //tampilkan status loading dan animasinya $("#status").html("Loading..."); $("#loading").show(); //lakukan pengiriman dan pengambilan data $.ajax({ url: "proses.php", data: "op=ambildata&nik="+nik, cache: false, success: function(msg){ //karna di server pembatas setiap data adalah | //maka kita split dan akan membentuk array data = msg.split("|"); //masukkan ke masing-masing textfield $("#nama").val(data[0]); $("#email").val(data[1]); $("#alamat").val(data[2]); //hilangkan status dan animasi loading $("#status").html("");