jQuery.ajax() - Ajax , jQuery |
jQuery.ajax() เป็นการใช้ jQuery กับ Ajax เพื่อติดต่อระหว่าง Server กับ Client ในรูปแบบต่าง ๆ
สำหรับเบื้องต้น Ajax กับ jQuery สามารถอ่านได้ที่บทความ
Go to : jQuery Ajax : jQuery and Ajax
Go to : Ajax Tutorial : สอน Ajax เขียน Ajax เรียน Ajax สุดยอดการใช้งาน Ajax อย่างง่าย
Syntax
jQuery.ajax( url, [settings] )
jQuery.ajax( settings )
Example 1 ตัวอย่างการใช้งาน jQuery กับ Ajax
jQueryAjax1.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$.ajax({
type: "POST",
url: "jQueryAjax1.php",
cache: false,
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Call : " + msg);
$("p").append(msg);
}
});
});
});
</script>
</head>
<body>
<p></p>
<input type="button" id="btn1" value="Call">
</body>
</html>
jQueryAjax1.php
<?php
echo "name=".$_POST["name"]." , location=".$_POST["location"];
?>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ jQuery กับ Ajax แบบง่าย ๆ ด้วย $.ajax
Example 2 ตัวอย่างการใช้งาน jQuery กับ Ajax
jQueryAjax2.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
var bodyContent = $.ajax({
url: "jQueryAjax2.php",
global: false,
type: "POST",
data: "name=John&location=Boston",
dataType: "html",
async:false,
success: function(msg){
alert(msg);
}
}
).responseText;
$("p").text(bodyContent);
});
});
</script>
</head>
<body>
<p></p>
<input type="button" id="btn1" value="Call">
</body>
</html>
jQueryAjax2.php
<?php
echo "name=".$_POST["name"]." , location=".$_POST["location"];
?>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ jQuery กับ Ajax และการตรวจสอบค่าต่าง ๆ ที่กำลังประมวลผลอยู่
Example 3 ตัวอย่างการใช้งาน jQuery กับ Ajax
jQueryAjax3.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$.ajax({ url: "jQueryAjax3.php" })
.success(function(result) { $("#div1").html(result); })
.error(function() { $("#div1").html("error"); })
.complete(function() { $("#div1").after("Ajax load finished"); });
});
});
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" id="btn1" value="Load">
</body>
</html>
jQueryAjax3.php
<?php
for($i=1;$i<=10;$i++)
{
echo $i."<br>";
}
?>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ jQuery กับ Ajax ที่สามารถติดตามตรวจสอบสถานะการทำงาน
Example 4 ตัวอย่างการใช้งาน jQuery กับ Ajax
jQueryAjax4.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$.post("jQueryAjax4.php", {
data1: $("#txt1").val(),
data2: $("#txt2").val()},
function(result){
$("#div1").html(result);
}
);
});
});
</script>
</head>
<body>
<input type="text" id="txt1">
<input type="text" id="txt2">
<div id="div1"></div>
<input type="button" id="btn1" value="Load">
</body>
</html>
jQueryAjax4.php
<?php
echo "You input : <u>".$_POST["data1"]."</u> and <u>".$_POST["data2"]."</u>";
?>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ jQuery กับ Ajax แบบส่งค่า post
Example 5 ตัวอย่างการใช้งาน jQuery กับ Ajax
jQueryAjax5.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$.get("jQueryAjax5.php", {
data1: $("#txt1").val(),
data2: $("#txt2").val()},
function(data){
$("#div1").html(data);
}
);
});
});
</script>
</head>
<body>
<input type="text" id="txt1">
<input type="text" id="txt2">
<div id="div1"></div>
<input type="button" id="btn1" value="Load">
</body>
</html>
jQueryAjax5.html
<?php
echo "You input : <u>".$_GET["data1"]."</u> and <u>".$_GET["data2"]."</u>";
?>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ jQuery กับ Ajax แบบส่งค่า get
ลิ้งค์ที่ควรศึกษา
Go to : jQuery Selectors : jQuery Selectors and Element
Go to : jQuery Ajax : jQuery and Ajax
Go to : jQuery Ajax กับ JSON ทำความเข้าใจ การรับส่งข้อมูล JSON ผ่าน jQuery กับ Ajax
เกี่ยวกับบทความ
ส่วนหนึ่งของบทความได้เรียบเรียงและแปลจากเว็บไซต์ jQuery.Com โค้ดตัวอย่างคำสั่งนี้อยู่ภายใต้สัญญาอนุญาตของ GFDL สามารถนำโค้ดและคำสั่งใช้งานได้ฟรี สงวนลิขสิทธิ์เฉพาะคำอธิบายภาษาไทย
|
 ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท
|
|
| |
By : |
ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ) |
| |
Score Rating : |
 |
|
| |
Create/Update Date : |
2011-09-22 21:49:25 /
2017-03-19 14:09:19 |
| |
Download : |
No files |
|
|
Sponsored Links / Related |
|
|
|
|
|
|
|
|
Load balance : Server 02
