บทความนี้จะเสนอเกี่ยวกับการใช้งาน Ajax ใน jQuery ซึ่งหาใครไม่มี src ของ jQuery ก็ให้เข้าเว็บ jquery.com เพื่อเข้าไปโหลด src มา
จริงๆ แล้ว jQuery ก็มีคู่มือการใช้งานของ jQuery อยู่แล้ว ซึ่งสามารถเข้าไปดูใน docs.jquery.com ซึ่ง Ajax ที่จะเขียนในบทความนี้ คู่มือการใช้งานของ Ajax ก็อยู่ในหน้า api.jquery.com/category/ajax/ คู่มือก็มีอยู่แล้ว แล้วผมจะสอนอะไรอีก งั้นผมก็จะแปลไทยให้คุณเข้าใจเพิ่มขึ้นแล้วกันนะครับ
ใน jQuery ผมแนะนำให้ใช้ function ของ jQuery.post() หรือ jQuery.get() ส่วน jQuery.ajax() ผมว่าวุ่นวายไป
มาเริ่มจาก jQuery.post() กันนะครับ post กับ get คนเขียนเว็บก็จะรู้กันว่าคืออะไร ซึ่ง function ตัวนี้จะส่งข้อมูลลักษณะการใช้ HTTP POST ซึ่ง function ตัวนี้จะให้เราใส่ parameter 4 ตัวดังนี้
jQuery.post(url[,data][,success(data,textStatus,jqXHR)] [,dataType]);
- url ตัวแรกก็จะคือ url ของข้อมูลที่เราจะติดต่อ
- data คือข้อมูลที่เราจะส่งไป
- success คือข้อมูลที่ได้รับกลับมา จะเข้า function ซึ่งมี parameter อยู่ 3 ตัวคือ แต่เราสนใจแค่ 1 ตัวก็พอคือ data
- dataType ชนิดของข้อมูล คือ html, script, xml หรือ json หากเป็น html หรือ taxt ธรรมดาก็ไม่ต้องระบุบ
ดูตัวอย่างกันเขียนกัน
<html>
<head>
<title> Test Ajax </title>
<!-- นำเข้าข้อมูล jquery java library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
function submitData(){
// ส่ง โดย function โพส ของ jquery
// $ คือ jQuery
$.post("jsondatatest.html", { name: $("#name").val(), pass: $("#passwd").val()},
function(data) {
process(data);
},
"json" // กำหนดให้มันเป็น json เพื่อที่ jquery จะแปลงข้อมูล json ให้เป็น object มาให้เลย
);
}
function process(data){
// เช็คข้อมูลสักหน่อย
if(data){
// อ่านตาม object ที่ได้รับจาก json
$("#fullname").html(data.firstName+" "+data.lastName);
$("#address").html(data.address.streetAddress+" "+data.address.city+" "+data.address.postalCode);
$("#tel").html(data.phoneNumbers[0]);
$("#divResult").show(); // สั่งโชว์ div divResult
}
}
</script>
</head>
<body>
Name : <input type="text" id="name" /><br />
Passwd : <input type="password" id="passwd" /><br />
<input type="button" name="bt" value=" Get Data " onclick="submitData()" />
<div id="divResult" style="display:none">
<hr />
Name : <span id="fullname"></span><br />
Address : <span id="address"></span><br />
Phone : <span id="tel"></span>
</div>
</body>
</html>
ส่วนข้อมูล file jsondatatest.html
{
"firstName": "John",
"lastName": "Smith",
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": 10021
},
"phoneNumbers": [
"212 555-1234",
"646 555-4567"
]
}
ต่อไปคือการเขียนโดนใช้ function jQuery.get() ตัวนี้แตกต่างจาก jQuery.post() ตรงที่ไม่มี parameter data เพราะว่า get จะส่งข้อมูลไปทาง url นั่นเอง
jQuery.get(url[,data][,success(data,textStatus,jqXHR)][,dataType]);
ดูตัวอย่างกัน
<html>
<head>
<title> Test Ajax </title>
<!-- นำเข้าข้อมูล jquery java library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
function submitData(){
// ส่ง โดย function โพส ของ jquery
// $ คือ jQuery
$.get("jsondatatest.html?name="+$("#name").val()+"&pass="+$("#passwd").val(),
function(data) {
process(data);
},
"json" // กำหนดให้มันเป็น json เพื่อที่ jquery จะแปลงข้อมูล json ให้เป็น object มาให้เลย
);
}
function process(data){
// เช็คข้อมูลสักหน่อย
if(data){
// อ่านตาม object ที่ได้รับจาก json
$("#fullname").html(data.firstName+" "+data.lastName);
$("#address").html(data.address.streetAddress+" "+data.address.city+" "+data.address.postalCode);
$("#tel").html(data.phoneNumbers[0]);
$("#divResult").show(); // สั่งโชว์ div divResult
}
}
</script>
</head>
<body>
Name : <input type="text" id="name" /><br />
Passwd : <input type="password" id="passwd" /><br />
<input type="button" name="bt" value=" Get Data " onclick="submitData()" />
<div id="divResult" style="display:none">
<hr />
Name : <span id="fullname"></span><br />
Address : <span id="address"></span><br />
Phone : <span id="tel"></span>
</div>
</body>
</html>
เห็นไหมว่า ลักษณะการเขียน post และ get จะไม่แตกต่างกัน ซึ่งผมก็แนะนำให้ใช้ post เพราะว่าต่อไป เราอาจจะต้องทำกับข้อมูลที่ส่งมีขนาดหลายตัวอักษร ซึ่ง get มันจะจำกัดปริมาณข้อมูลความยาวของ url เอาไว้
มีข้อเสนอแนะติชมได้นะครับ
Related Posts
- parseInt(“08″) ใน js ทำไมค่าที่ออกมาถึงเป็น 0
- Dojo อีกทางตัวหนึ่งที่ผมเลือกเป็น javascript framwork
- ทำความรู้จักกับ JSON
- PHP แยกส่วนการเขียนให้เป็นระเบียบ
- Android ดึงภาพจากเว็บมาแสดงใน ImageView
- Android การนำรูปภาพมาใส่ในโปรแกรม
- เริ่มต้นกับการพัฒนาโปรแกรมใน Android
- PHP5 กับการทำสอบเขียนแบบ OOP
- PHP ในเรื่องของ if while และ for
- เริ่มต้นการเขียนเว็บด้วย PHP
ดีใจจัง มีความรู้ดี ๆ มาให้อ่านอีกแล้ว เย้ๆๆ (ยังไม่เคยใช้ jQuery เลยนะเนี้ย -_-”)
ขอบคุณครับ