Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > jQuery > jQuery Introduction > jQuery Ajax : jQuery and Ajax



Clound SSD Virtual Server

jQuery Ajax : jQuery and Ajax

jQuery Ajax รูปแบบคำสั่งการใช้ jQuery กับ Ajax บน jQuery Library Framework
jQuery กับ Ajax ใน jQuery เองก็ได้ออกแบบ function ที่ทำงานร่วมกับ Ajax ได้อย่างมีประสิทธิ์ภาพ ด้วย Code คำสั่งที่สั้นมาก ๆ และยังไม่ต้องกังวลเรื่องปัญหา Cross ของ Web Browser อีกด้วย ด้วยประสิทธิ์และการออกแบบที่เป็นมาตรฐานและถูกต้องตามหลักของ W3C CSS Validation รองรับการทำงานทุกเว็บบราวเซอร์ และสามารถทำงานได้รวดเร็ว ด้วย Library ไฟล์ขนาดเล็ก องค์กรหลายๆ แห่งได้ประกาศใช้ jQuery เป็น Core หลักในการทำงานร่วมกับ Ajax เช่น Google ได้ประกาศใช้ Library ของ jQuery ใช่ร่วมกับ Application หลายตัวทีได้พัฒนาขึ้น Open Source ดัง ๆ หลายตัว หรือแม้กระทั้ง Microsoft ก้ได้นำ jQuery มาเป็นส่วนหนึ่งของ Framework ที่ใช้ในการพัฒนา ร่วมกับ ASP.NET (Web Application) ที่ทำงานร่วมกับ Ajax ด้วยเหตุผลและความในสามารถของ jQuery นี่เอง คาดว่าในอนาคต jQuery นั้นมีความจำเป็นมาก ๆ ที่จะต้องเรียนรู้ และ ศึกษาการใช้งานอย่างจริงจัง เพื่อสร้างเสริมประสบการณ์และความรู้ใหม่ ๆ ในการพัฒนา Web Application ในรูปแบบต่าง ๆ

พื้นฐาน jQuery Ajax Syntax

jQuery Ajax
$(selector).load(url,data,callback);



1. ตัวอย่างการใช้งาน jQuery แบบง่าย ๆ ผ่าน property load()

Code (webpage.php)
<?php
for($i=1;$i<=10;$i++)
{
	echo $i."<br>";
}
?>


Code (jQuery)
<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(){
		$("#div1").load('webpage.php');
	});

});
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" id="btn1" value="Load">
</body>
</html>


Screenshot

jQuery Ajax

คำอธิบาย
เมื่อคลิกที่ปุ่ม Load จะมีการ load ข้อมูลจากไฟล์ webpage.php ซึ่งเป็นการทำงานง่าย ๆ ด้วยคำสั่งสั้น ๆ ของ jQuery








2. ตัวอย่างการใช้งาน jQuery แบบง่าย ๆ ผ่าน method ajax() โดยวิธีนี้สามารถตรวจสอบสถานะการทำงาน และกำหนดคุณสมบัติต่าง ๆ ได้

Code (webpage.php)
<?php
for($i=1;$i<=10;$i++)
{
	echo $i."<br>";
}
?>


Code (jQuery)
<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: "webpage.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>


Screenshot

jQuery Ajax

คำอธิบาย
เมื่อคลิกที่ปุ่ม Load จะมีการ load ข้อมูลจากไฟล์ webpage.php โดยมีการตรวจสอบผลการทำงานว่า
.success เมื่อทำงานสมบูรณ์ไม่มีข้อผิดพลาด
.error เมื่อมีการทำงานผิดพลาด เช่น หาไฟล์ไม่เจอ 404
.complete เมื่อ Ajax มีการทำงานเสร็จสิ้น ไม่ว่าจะ suscess หรือ error ก็ตาม


3. ตัวอย่างการใช้งาน jQuery Ajax ส่งค่าแบบ $_POST

Code (webpage.php)
<?php
 echo "You input : <u>".$_POST["data1"]."</u> and <u>".$_POST["data2"]."</u>";
?>


Code (jQuery)
<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("webpage.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>


Screenshot

jQuery Ajax

คำอธิบาย
จะมีการส่งค่าตัวแปรแบบ $_POST โดยส่งค่า #txt1 และ #txt2 หรือถ้าต้องการส่งค่ามากกว่านี้ก็สามารถเพิ่มตัวแปรได้แบบง่าย ๆ เช่น

<script type="text/javascript">
$(document).ready(function(){

	$("#btn1").click(function(){

			$.post("webpage.php", { 
			data1: $("#txt1").val(), 
			data2: $("#txt2").val(), 
			data3: $("#txt3").val(), 
			data4: $("#txt4").val(), 
			data5: $("#txt5").val()}, 
				function(result){
					$("#div1").html(result);
				}
			);

		});
	});
</script>









4. ตัวอย่างการใช้งาน jQuery Ajax ส่งค่าแบบ $_GET

Code (webpage.php)
<?php
 echo "You input : <u>".$_GET["data1"]."</u> and <u>".$_GET["data2"]."</u>";
?>


Code (jQuery)
<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("webpage.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>


Screenshot

jQuery Ajax

คำอธิบาย
จะมีการส่งค่าตัวแปรแบบ $_GET โดยส่งค่า #txt1 และ #txt2 หรือถ้าต้องการส่งค่ามากกว่านี้ก็สามารถเพิ่มตัวแปรได้แบบง่าย ๆ เช่น

<script type="text/javascript">
$(document).ready(function(){

	$("#btn1").click(function(){

			$.get("webpage.php", { 
			data1: $("#txt1").val(), 
			data2: $("#txt2").val(), 
			data3: $("#txt3").val(), 
			data4: $("#txt4").val(), 
			data5: $("#txt5").val()}, 
				function(result){
					$("#div1").html(result);
				}
			);

		});
	});
</script>



จากตัวอย่าง 3-4 ตัว จะเห็นว่า jQuery สามารถลดการเขียนจำนวน Code ได้เป็นอย่างมาก และ Syntax ก็สามารถเรียนรู้เข้าใจได้อย่างไม่ยากเกินไป ซึ่งบทความนี้เป็นเพียง Basic jQuery กับ Ajax เท่านั้น สำหรับการใช้งานที่ซับซ้อน ถ้ามีโอกาสจะทำบทความไว้ให้ศึกษาเล่น ๆ กันครับ


บทความอื่น ๆ ที่เกี่ยวข้อง jQuery กับ Ajax
Go to : jQuery Ajax : jQuery and Ajax คำสั่งพื้นฐาน การเรียกใช้งาน jQuery กับ Ajax Framework
Go to : jQuery Ajax กับ JSON ทำความเข้าใจ การรับส่งข้อมูล JSON ผ่าน jQuery กับ Ajax

   
Share


ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท


ลองใช้ค้นหาข้อมูล


   


Bookmark.   
       
  By : ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
  Score Rating :  
  Create/Update Date : 2011-09-21 21:10:33 / 2017-03-19 13:19:59
  Download : No files
 Sponsored Links / Related

 
jQuery : What's a jQuery , jQuery คืออะไร ??
Rating :

 
jQuery : How to use , จะเขียน jQuery จะต้องทำอย่างไร
Rating :

 
jQuery Syntax : jQuery Basic Syntax
Rating :

 
jQuery Selectors : jQuery Selectors and Element
Rating :

 
jQuery HTML : jQuery and HTML
Rating :

 
jQuery Css : jQuery and Css
Rating :

 
jQuery Events : jQuery and Events
Rating :

 
jQuery Effects : jQuery and Effects
Rating :


ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


Hit Link
   







Load balance : Server 04
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่