สิ่งที่ต้องเตรียมคือ
1.jQuery (แนะนำให้ version ต่ำกว่า 2.0 เนื่องจากยัง support ie6/7/8) จาก ลิงค์นี้ >>
http://jquery.com/download/ 2.file ชื่อ index.html (ความจริงแล้วจะเป็น index.php ก็ได้ แต่เพื่อจะให้เห็นถึงการทำงานได้ชัดเจนยิ่งขึ้นจึงใช้ .html)
3.file ชื่อ cal.php(จะใช้ในการรับค่า และคำนวณ)
4.fileรูปสำหรับแสดงตอนโหลด AJAX
เริ่มจาการสร้าง file index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX jQuery PHP</title>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#cal_bt").click(function() { //เมื่อคลิกที่ปุ่ม คำนวณ ซึ่ง id ของปุ่มนี้คือ cal_bt ให้เรียกใช้งาน AJAX
v1=$("#v1").val();//รับค่าจาก text input ที่ค่า id ของ input นั้น= v1
v2=$("#v2").val();
$("#show_cal").html('<p><img src="images/ajax-loader-small.gif"></p>'); //ช่วงที่โหลด AJAX ให้นำรูปมาแสดงก่อน
$.ajax({
type: "POST", //ส่งค่าแบบโพส
url:"cal.php" , //ส่งค่าไปยัง file ที่ชื่อว่า cal.php
data: "v1="+v1+"&v2="+v2, // ค่าที่ส่งไป สามารถส่งได้เรื่อยๆ
success: function(data){ //เมื่อกระบวนการเสร็จสิ้นให้นำผลลัพธ์ไปแสดงที่ <div id=show_cal></div>
$("#show_cal").html(data);
}
});
});
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input type="text" name="v1" id="v1" />
*
<input type="text" name="v2" id="v2" />
<input type="button" name="bt1" id="cal_bt" value="คำนวณ" />
</form>
<div id="show_cal"></div>
</body>
</html>
file cal.php
<?
$v1=$_POST['v1'];//รับค่า v1
$v2=$_POST['v2'];
$cal_value = $v1*$v2;//คำนวณ
echo $v1.'*'.$v2.'='.$cal_value;//แสดงผล
?>
จากตัวอย่างเป็นการ ส่งค่าสองค่าจากหน้า index.html เพื่อที่จะไปคำนวณใน cal.php
ผลลัพธ์ที่ได้จะถูกนำกลับมาแสดง ยังหน้า index.html ใน tag ของ
<div id="show_cal"></div>ส่วนคำอธิบายต่างๆ ผม comment ไว้ที่หลัง code นะครับ
ดาวน์โหลดตัวอย่างทั้งหมดได้ด้านล่างนี้
fly back home
