1) Lihat kod contoh untuk jQuery AJAX
1.1) Pergi ke http://www.w3schools.com/jquery/jquery_ajax_get_post.asp dan baca nota bertajuk jQuery $.post() Method.
1.2) Lihat bagaimana kod contoh berfungsi di http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_post
1.3) Pemerhatian
Kod ini mengandungi panggilan jQuery AJAX Post ke demo_test_post.asp.
Skrip demo_test.asp akan memproses data dan memulangkannya bersama maklumat status.
Apabila panggilan Post berjaya alert box akan muncul memaparkan maklumat data dan status.
1.4) Sebagai rujukan, kod yang terkandung di dalam demo_test_post.asp adalah berikut. (Anda juga boleh gunakan skrip lain seperti PHP, JSP dan sebagainya).
<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>
|
2) Lihat contoh untuk jQuery Form
2.1) Pergi ke http://www.w3schools.com/jquery/ajax_serializearray.asp dan baca tentang penggunaan serialize dalam pemprosesan form.
2.2) Lihat bagaimana kod contoh berfungsi di http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_serializearray
2.3) Fungsi serializeArray berperanan mengubah Data Field dan Data Value yang terdapat di dalam Form kepada bentuk data bersiri (serial data). Data bersiri ini seterusnya boleh digunakan sebagai salah satu parameter dalam fungsi jQuery AJAX Post (lihat Contoh 1). Untuk ini, kita akan salin kod dalam Contoh 1 dan masukkannya ke dalam Contoh 2.
3) Ubahsuai
3.1) Ubahsuai kod dalam elemen <form> pada Contoh 2 supaya menepati format AJAX Post Data Key dan Data Value.
<form id="SendForm">
Name: <input type="text" name="name" value="Mickey"><br>
City: <input type="text" name="city" value="Mouse"><br>
</form>
<button id="SendButton">Send Data</button>
|
3.2) Ubahsuai kod dalam elemen <script> pada Contoh 1 dan salin/tampal ke dalam Contoh 2
<script>
$(document).ready(function(){
$("#SendButton").click(function(){
var senddata = $("#SendForm").serializeArray();
$.post("demo_test_post.asp",
senddata
,
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
|
3.3) Contoh:
3.4) Hasilnya:
PERHATIAN:
Bagi Web Mobile Project, kod ini mestilah dijalankan dalam domain yang sama. Jika tidak ralat CORS akan berlaku dan ia akan menghalang server dari memproses AJAX Post ini.
|
4) RUJUKAN
4.1) Kesudahannya, Kod Penuh adalah seperti dibawah.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#SendButton").click(function(){
var senddata = $("#SendForm").serializeArray();
$.post("demo_test_post.asp",
senddata
,
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>
<form id="SendForm">
Name: <input type="text" name="name" value="Mickey"><br>
City: <input type="text" name="city" value="Mouse"><br>
</form>
<button id="SendButton">Send Data</button>
</body>
</html>
|
5) TAMBAHAN
Jika anda mahu menguji dengan kod PHP, anda boleh ubahsuai kod di atas seperti berikut
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#SendButton").click(function(){
var senddata = $("#SendForm").serializeArray();
$.post("http://www.w3schools.com/php/welcome.php",
senddata
,
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>
<form id="SendForm">
Name: <input type="text" name="name" value="Mickey"><br>
Email: <input type="text" name="email" value="Mouse"><br>
</form>
<button id="SendButton">Send Data</button>
</body>
</html>
|
Hasilnya.
Kandungan skrip welcome.php adalah seperti berikut.
<html>
<body>
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>
</body>
</html>
|
(Berdasarkan contoh di http://www.w3schools.com/php/php_forms.asp .)
No comments:
Post a Comment