Bagaimana meneruskan data dari satu halaman ke halaman lain di php menggunakan ajax?

Pada artikel ini saya akan menjelaskan dengan sebuah contoh, bagaimana mengirim (pass) nilai (data) dari satu halaman ke halaman lain dengan empat cara berbeda menggunakan jQuery

Empat cara mengirim (pass) nilai (data) dari satu halaman ke halaman lain menggunakan jQuery adalah

Table of Contents Show

Bagaimana cara meneruskan data dari satu halaman ke halaman lain di ajax?
Bagaimana cara mengirim data dari halaman lain menggunakan ajax PHP?
Bagaimana cara meneruskan variabel dari satu halaman ke halaman lain di PHP?
Bagaimana cara meneruskan nilai dari ajax ke PHP?

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

<skrip ketik="text/javascript" . //ajax. googleapis. com/ajax/libs/jquery/1. 8. 3/jquery. min. js">="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">skrip>

Nama

<br />

Teknologi

pilih >select>

Halaman Tujuan (Halaman 2. htm)

Markup HTML terdiri dari HTML SPAN (Label) untuk menampilkan data yang dikirim

<skrip ketik="text/javascript" . //ajax. googleapis. com/ajax/libs/jquery/1. 8. 3/jquery. min. js">="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">skrip>

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)

$( fungsi () {

$( "#btnQueryString" ). ikat( "klik" , fungsi () {

var url = "Halaman2. htm?name=" + encodeURIComponent($( "#txtName" ). val()) + "&technology=" + encodeURIComponent($( "#ddlTechnolgy").val());

jendela. lokasi. href = url;

});

skrip >script>

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();<

$( fungsi () {

jika (queryString. panjang == 0) {

if (jendela. lokasi. mencari. pisahkan( '?' ). panjang > 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);

}

});

skrip >script>

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.

<skrip ketik="text/javascript" . // cdn. jsdelivr. net/jquery. kue/1. 3. 1/jquery. Kue kering. js">="http://cdn.jsdelivr.net/jquery.cookie/1.3.1/jquery.cookie.js">skrip>

$( fungsi () {

$( "#btnCookie" ). ikat( "klik" , fungsi () {

$. cookie( "nama" , $( "#txtNama" ). val());

$. cookie( "teknologi" , $( "#ddlTechnolgy" ). val());

jendela. lokasi. href = "Halaman2. htm" ;

});

skrip >script>

Halaman Tujuan

Di dalam event handler jQuery document ready, nilai diambil dari Cookie menggunakan plugin jQuery Cookie dan ditampilkan dalam HTML SPAN.

<skrip ketik = "text/javascript" . // cdn. jsdelivr. net/jquery. kue/1. 3. 1/jquery. Kue kering. js"> src = "http://cdn.jsdelivr.net/jquery.cookie/1.3.1/jquery.cookie.js">skrip>

$( fungsi () {

jika ($. cookie( "nama" ). = null && $. cookie( "teknologi" ). = null ) {

var data = ";

data += " " " " " " " " " " " " " " " " " " " " + $. cookie( "nama" ) + " " " " " " " " " " " " " " " " " " " " + $. cookie( "teknologi" );

$( "#lblData" ). html(data);

$. hapusCookie( "nama" );

$. hapusCookie( "teknologi" );

}

});

skrip >script>

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

$( fungsi () {

$( "#btnPopup" ). ikat( "klik" , fungsi () {

jendela. buka( 'Halaman2. htm' );

});

skrip >script>

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);

}

});

skrip >script>

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

$( fungsi () {

$( "#btnPost" ). ikat( "klik" , fungsi () {

//Membuat Formulir.

var $form = $( """""""""""""""""""").attr("is" , "data_form")

. attr( "aksi" , "Halaman2. aspx" )

. attr( "metode" , "posting" );

$( "body" ). tambahkan($form);

//Menambahkan nilai yang akan dikirim.

AddParameter($form, "name" , $( "#txtName").val());

AddParameter($form, "technology" , $( "#ddlTechnolgy").val());

//Kirim Formulir.

$bentuk[0]. kirim();

});

fungsi AddParameter(bentuk, nama, nilai) {

var $input = $( """""""""""""""""""").attr("ketik" , "tersembunyi" )

. attr( "nama" , nama)

. attr( "nilai" , nilai);

membentuk. tambahkan($input);

}

skrip >script>

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?

Nilai TextBox dan DropDownList akan dikirim ke halaman lain dengan empat cara berbeda menggunakan jQuery. .

Bagaimana cara mengirim data dari halaman lain menggunakan ajax PHP?

ajax({ ketik. 'POST', url. '. /portal/kurikulum. php', data. 'studentNumber='+$('#StudentID'). val(), sukses. fungsi(data) { $('#kurikulum'). html(data);