การเขียน ajax ต้องใช้ความรู้ในการเขียน JQuery มาใช้ สามารถศึกษาได้ที่ jQuery คืออะไร บทเรียน jQuery
jQuery.get() หรือ $.get() ใน ajax มีข้อดีคือ สามารถแสดงข้อมูลโดยที่ไม่ต้องโหลดหนเาใหม่
รูปแบบในการเขียน : jQuery.get( url [, data ] [, success ] [, dataType ] )
ตัวอย่างในการใช้ jQuery.get() ใน ajax
เป็นเว็บที่แสดงค่าที่กรอกลงไปใน text คลิกปุ่ม แล้วทำการแสดงค่าบนหน้าเว็บโดยที่ไม่มีการโหลดหน้าใหม่ ตามรูป
โดยมีไฟล์หลักๆอยู่ 2 ไฟล์คือ
1. get-html.html ไว้ในการส่งค่า รับค่า แสดงผล
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#btn").click(function()
{
$.get("ajax-get.php", //url
{
senddata:$("#data").val() //data
},
function(senddata) //success
{
$("#show").html(senddata);
}
);
});
});
</script>
</head>
<body>
<div id ="insert">
<input type="text" id="data" name="data">
<br>
<input type="button" name="btn" id="btn" value="GET">
</div>
<div id="show"></div>
</body>
</html>โครงสร้างของเว็บก็คือ มี text ในการป้อนค่า มีปุ่ม เพื่อส่งค่าที่ป้อนลงไป
การทำงานก็คือ เราจะใส่ตัว $.get() ไว้ในส่วนของ script โโยจะต้องมีการเรียกใช้ Jquery ในscript ก่อน
จากนั้น ทำการดักจับ Event ว่ามีการคลิกที่ปุ่มหรือไม่ ถ้ามีการคลิกที่ปุ่ม ให้ทำการเรียก url โดยส่ง data ก็คือข้อมูลที่ป้อนใน text ไป ส่วน success นั้น ก็คือ ถ้ามีการส่งค่ากลับมา จะทำอย่างไร ในที่นี้คือ แสดงผลใน <div id="show">
2. ajax-get.php สำหรับส่งค่ากลับมาแสดงผล
<?php
echo 'Input : '.$_GET['senddata'];
?>การทำงานของไฟล์นี้ คือ เมื่อรับค่าที่มาจาก get-html.html แล้วให้ทำการแสดงค่า โดยการ echo ค่านั้นกลับไปแสดงผลยังหน้า get-html.html
สำหรับบทเรียน php ศึกษาเพิ่มเติมได้ที่นี่ บทเรียน PHP พื้นฐาน, และการใช้ JQuery ศึกษาได้ที่ บทเรียน jQuery
