Empat cara mengirim (pass) nilai (data) dari satu halaman ke halaman lain menggunakan jQuery adalah
1. Parameter QueryString
2. Kue
3. Jendela Munculan
4. Formulir Posting
Markup HTML
Halaman Sumber (Default. htm)
Markup HTML terdiri dari Kotak Teks HTML dan Pilih HTML (DropDownList). Nilai TextBox dan DropDownList akan dikirim ke halaman lain dengan empat cara berbeda menggunakan jQuery
="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
Tangkapan layar
1. QueryString
Pro. Tidak ada yang seperti itu.
Kontra. Data terlihat di URL.
Halaman Sumber
Halaman Sumber terdiri dari Tombol HTML yang ditetapkan dengan event handler jQuery Click
Ketika Tombol diklik, nilai Name TextBox dan Technology DropDownList ditetapkan sebagai Parameter QueryString dan kemudian halaman dialihkan ke halaman Tujuan (Page2. htm)
Halaman Tujuan
Di dalam event handler jQuery document ready, QueryString diekstraksi dengan memisahkan URL halaman saat ini menggunakan karakter tanda Tanya (?).
Kemudian sebuah loop dieksekusi dan setiap nilai parameter QueryString diekstraksi dengan pemisahan lebih lanjut menggunakan karakter ampersand (&) dan nilai yang diekstrak didekodekan menggunakan fungsi JavaScript decodeURIComponent yang disisipkan sebagai pasangan Kunci dan Nilai ke dalam Array
Terakhir, nilai parameter QueryString diambil dari Array menggunakan nama parameter QueryString i. e. Kunci dan ditampilkan dalam HTML SPAN
var queryString = baru Array(); 1) {
var parameter = jendela. lokasi. mencari. pisahkan( '?' )[1]. pisahkan( '&' );
untuk ( var i = 0; i < . panjang;
var key = params[i]. belah( '=' )[0];
var value = decodeURIComponent(params[i]. split( '=' )[1]);
queryString[kunci] = nilai;
}
}
}
jika (queryString[ "nama" ]. = null && queryString[ "teknologi" ]. = null ) {
var data = ";
data += " " " " " " " " " " " " " " " " " " " " + queryString[ "nama" ] + " . " + queryString[ "teknologi" ];
$( "#lblData" ). html(data);
}
});
Tangkapan layar
2. Kue
Pro. Data disembunyikan di Cookie.
Kontra. Cookie dapat dinonaktifkan di browser oleh pengguna akhir.
Catatan. Metode ini hanya akan berfungsi jika Cookie diaktifkan di browser.
Halaman Sumber
Halaman Sumber terdiri dari Tombol HTML yang ditetapkan dengan event handler jQuery Click
Ketika Tombol diklik, nilai Name TextBox dan Technology DropDownList ditetapkan ke Cookie dan kemudian halaman dialihkan ke halaman Tujuan (Page2. htm)
Catatan. Untuk membaca dan menulis Cookie, plugin jQuery Cookie telah digunakan.
src = "//cdn.jsdelivr.net/jquery.cookie/1.3.1/jquery.cookie.js">
$( fungsi () {
jika ($. cookie( "nama" ). = null && $. cookie( "teknologi" ). = null ) {
var data = ";
data += " " " " " " " " " " " " " " " " " " " " + $. cookie( "nama" ) + " " " " " " " " " " " " " " " " " " " " + $. cookie( "teknologi" );
$( "#lblData" ). html(data);
$. hapusCookie( "nama" );
$. hapusCookie( "teknologi" );
}
});
Tangkapan layar
3. Jendela Munculan
Pro. Kontrol diakses sehingga tidak perlu mengirim data.
Kontra. Membuka jendela atau tab baru.
Halaman Sumber
Halaman Sumber terdiri dari Tombol HTML yang ditetapkan dengan event handler jQuery Click
Ketika Tombol diklik, halaman Tujuan (Halaman 2. htm) dibuka sebagai Jendela Popup
Halaman Tujuan
Di dalam event handler jQuery document ready, nilai Nama dan Teknologi diambil dari kontrolnya masing-masing dengan mengakses jendela Halaman Induk.
Terakhir, nilai ditampilkan dalam HTML SPAN
$( fungsi () {
if (jendela. pembuka. = batal &&. jendela. pembuka. ditutup) {
var induk = $(jendela. pembuka. dokumen). isi();
var data = ";
data += " " " " " " " " " " " " " " " " " " " " + induk. temukan( "#txtNama" ). val() + " " " " " " " " " " " " " " " " " " " " + induk. temukan( "#ddlTechnolgy" ). val();
$( "#lblData" ). html(data);
}
});
Tangkapan layar
4. Formulir Posting
Pro. Terbaik di kelasnya karena ada jaminan 100% data dikirim juga dalam bentuk tersembunyi.
Kontra. Memerlukan teknologi sisi Server untuk mengambil data yang diposting.
Catatan. Dengan metode ini kita hanya dapat mengirim data melalui jQuery tetapi untuk menerima kita memerlukan beberapa teknologi sisi server seperti ASP. Net, PHP, JSP, dll. Disini saya menjelaskan menggunakan ASP. Bersih dan C#.
Halaman Sumber
Halaman Sumber terdiri dari Tombol HTML yang ditetapkan dengan event handler jQuery Click
Saat Tombol diklik, Formulir HTML dibuat dan ditambahkan ke Tag BODY halaman
Atribut tindakan diatur ke halaman Tujuan (Page2. aspx)
Kemudian menggunakan fungsi AddParameter JavaScript, nilai Name TextBox dan Technology DropDownList ditambahkan ke Form menggunakan elemen Hidden Field dan kemudian Form dikirimkan
Halaman Tujuan
Di dalam event Page Load, nilai Name TextBox dan Technology DropDownList diambil menggunakan Request. Pengumpulan form dan dicetak pada halaman menggunakan Response. Fungsi tulis
Bagaimana cara meneruskan data dari satu halaman ke halaman lain di ajax?
.