AJAX Learninghttp://www.ninenik.comรวมบทความ AJAX th-THFri, 10 Feb 2012 03:01:58 +0700Copyright ninenik.comCMSPro เว็บไซต์สำเร็จรูปhttp://www.ninenik.com/images/logo_ninenik.gifhttp://www.ninenik.comการสร้าง ajax dictionary จาก longdo ด้วย jQuery http://www.ninenik.com/การสร้าง_ajax_dictionary_จาก_longdo_ด้วย_jQuery_-389.htmlตัวอย่างการใช้งานต่อไปนี้ เป็นการนำ ระบบค้นหาคำศัพท์ จากเว็บไซต์
http://dict.longdo.com/

ดู Longdo Dict Application Programming Interface (API) ได้ที่
http://dict.longdo.com/page/api

เหมาะสำหรับใครที่ต้องการนำระบบค้นหาคำศัพท์ dictionary รูปแบบ ajax ไปตกแต่งเว็บไซต์
โดยเฉพาะเว็บไซต์เกี่ยวกับการศึกษา

โดยจุดประสงค์หลักของเนื้อหา คือ ทำความคุ้นเคย กับการใช้งาน ajax ใน jQuery ซึ่งในเว็บไซต์ ก็ได้
นำเสนอไปหลายครั้ง หลายรูปแบบ แล้ว

ตัวอย่าง


วิธีการ
1.สร้างไฟล์ php ชื่อ ajax_translate.php ดังโค้ดด้านล่าง (คำอธิบายแสดงในโค้ด)

<?php
header("Content-type:text/html; charset=UTF-8");        
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);       
// ตรวจสอบว่ามีการส่งคำค้นมาหรือไม่
if(isset($_GET['keyword']) && trim($_GET['keyword'])!=""){
	$keyword=trim($_GET['keyword']);
	// นำผลลัพธ์การค้นหา จาก longdo dictionary มาไว้ในตัวแปร
	$data=file_get_contents("http://dict.longdo.com/mobile.php?search=".$keyword);	//
	echo strip_tags($data,"<a><table><td><tr><font><style><meta><br>"); // แสดงส่วนของเนื้อหาที่จำเป็นต้องแสดง
}else{ // กรณีไม่มีการส่งคำค้นมา
	echo "โปรดระบุคำที่ต้องการแปล";	// แสดงข้อความแจ้งเตือน
}
?>

2.สร้างไฟล์สำหรับทดสอบ demo_ajax_translate.php ตามโค้ดด้านล่าง กรุณาอ่านคำแนะนำในโค้ด
โดยจะมีอยู่ 3 ส่วน คือ
1.ส่วนของ css สำหรับกำหนดรูปแบบ สีข้อความ พื้นหลัง หรืออื่นๆ ตามต้องการ
2.ส่วนของ element องค์ประกอบในการใช้งาน
3.ส่วนของ javascript โดยใช้งานผ่าน jQuery

<!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>longdo ajax dictionary</title>
<!--1.ส่วนของ css สำหรับกำหนดรูปแบบ สีข้อความ พื้นหลัง หรืออื่นๆ ตามต้องการ-->
<style type="text/css">
div#myblock_dict{
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;	
	margin:auto;
	width:350px;	
}
input#translate_it{
	background-color:#F6C;
	color:#FFF;	
	border:1px groove #F9C;
	cursor:pointer;
}
div#input_search{
	background-color:#000;
	color:#FFF;
	text-align:center;
}
div#context_search{
	border:1px solid #F9C;
	height:300px;
	overflow:auto;
}
div#context_search{
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;	
	padding:5px;
	background-color:#FDEDFE;
}
div#context_search a{
	margin-left:3px !important;
	color:#F09;	
}
div#context_search td{
	padding:5px !important;
}
</style>
</head>

<body>


<!--2.ส่วนของ element องค์ประกอบในการใช้งาน-->
<div id="myblock_dict">
<div id="input_search">คำค้น
  <input type="text" name="keyword_q" id="keyword_q" />
  <input type="button" name="translate_it" id="translate_it" value="แปล" />
</div>
<div id="context_search">

</div>
</div>


<!--3.ส่วนของ javascript โดยใช้งานผ่าน jQuery-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
		// กำหนดตัวแปรสำหรับแสดงรูปกำลังโหลด
		var loading_img='
';
		loading_img+='';
		loading_img+='
';
		$("#keyword_q").click(function(){ // เมื่อคลิกที่ช่องคำค้น 
			// เพื่อสะดวกในการพิมพ์คำค้นใหม่ได้เลย
			$(this).select(); //  ถ้ามีข้อความอยู่ ให้ทำการเลือกข้อความนั้น
			$("#context_search").html(""); //  ล้างค่าข้อความผลลัพธ์เดิม ถ้ามี
		});
		$("#translate_it").click(function(){  // เมื่อคลิกที่ปุ่มคำว่า แปล
			$("#context_search").html(loading_img); // แสดงรูปกำลังโหลดในส่วนผลลัพธ์
			// ใช้ ajax ใน jQuery ส่งข้อมูลแบบ get
			$.get("ajax_translate.php",{keyword:$.trim($("#keyword_q").val()) },function(data){
				$("#context_search").html(data); // แสดงผลลัพธ์จากการค้นหา
			});
		});
		
		$("#keyword_q").keyup(function(event){
			if(event.keyCode==13){ // เมื่อกดปุ่ม Enter ให้เริ่มการค้นหา
				$("#context_search").html(loading_img); // แสดงรูปกำลังโหลดในส่วนผลลัพธ์
				$.get("ajax_translate.php",{keyword:$.trim($("#keyword_q").val())},function(data){
					$("#context_search").html(data); // แสดงผลลัพธ์จากการค้นหา
				});				

			}
		});
		
		// เมื่อคลิกที่ลิ้งค์ ในผลลัพธ์
		$("div#context_search a").live("click",function(){
			var text_search=$.trim($(this).text()); // นำคำจากลิ้งค์ที่คลิก มาเก็บในตัวแปร
			$("#context_search").html(loading_img); // แสดงรูปกำลังโหลดในส่วนผลลัพธ์
			$("#keyword_q").val(text_search); // นำคำจากลิ้งค์ไปแสดงที่ช่อง คำค้น
			$.get("ajax_translate.php",{keyword:text_search},function(data){
            	$("#context_search").html(data); // แสดงผลลัพธ์จากการค้นหา
			});		
			return false;			
		});
});
</script>


</body>
</html>

 

]]>Mon, 27 Dec 2010 12:16:55 +0700แสดงการแบ่งหน้า แบบ ajax ด้วย jQuery php และ csshttp://www.ninenik.com/แสดงการแบ่งหน้า_แบบ_ajax_ด้วย_jQuery_php_และ_css-358.htmlตัวอย่างโค้ดต่อไปนี้เป็นแนวทางสำหรับ การใช้งาน การแบ่งหน้า แบบ ajax
สามารถนำไปประยุกต์เพิ่มลูกเล่นเพิ่มเติม ได้ตามต้องการ

ตัวอย่าง  http://www.ninenik.com/demo/page_navi3_demo_ajax.php

css ส่วนของการแบ่งหน้า
 

<style type="text/css">
.browse_page{
	clear:both;
	margin-left:12px;
	height:35px;
	margin-top:5px;
	display:block;
}
.browse_page a,.browse_page a:hover{
	display:block;
	height:18px;
	width:18px;
	font-size:10px;
	float:left;
	margin-right:2px;
	border:1px solid #CCCCCC;
	background-color:#F4F4F4;
	color:#333333;
	text-align:center;
	line-height:18px;
	font-weight:bold;
	text-decoration:none;
}
.browse_page a:hover{
	border:1px solid #0A85CB;
	background-color:#0A85CB;
	color:#FFFFFF;
}
.browse_page a.selectPage{
	display:block;
	height:18px;
	width:18px;
	font-size:10px;
	float:left;
	margin-right:2px;
	border:1px solid #0A85CB;
	background-color:#0A85CB;
	color:#FFFFFF;
	text-align:center;
	line-height:18px;
	font-weight:bold;
}
.browse_page a.SpaceC{
	display:block;
	height:18px;
	width:18px;
	font-size:10px;
	float:left;
	margin-right:2px;
	border:0px dotted #0A85CB;
	font-size:11px;
	background-color:#FFFFFF;
	color:#333333;
	text-align:center;
	line-height:18px;
	font-weight:bold;
}
.browse_page a.naviPN{
	width:50px;
	font-size:12px;
	display:block;
	height:18px;
	float:left;
	border:1px solid #0A85CB;
	background-color:#0A85CB;
	color:#FFFFFF;
	text-align:center;
	line-height:18px;
	font-weight:bold;	
}
</style>

ส่วนของการแบ่งหน้าด้วย php
 

<?php
$link=mysql_connect("localhost","root","test");
mysql_select_db("test");
mysql_query("set character set utf8");
?>
<?php   
// สร้างฟังก์ชั่น สำหรับแสดงการแบ่งหน้า   
function page_navigator($before_p,$plus_p,$total,$total_p,$chk_page){   
	global $e_page;
	global $querystr;
	$urlfile="ajax_data.php"; // ส่วนของไฟล์เรียกใช้งาน ด้วย ajax (ajax_dat.php)
	$per_page=10;
	$num_per_page=floor($chk_page/$per_page);
	$total_end_p=($num_per_page+1)*$per_page;
	$total_start_p=$total_end_p-$per_page;
	$pPrev=$chk_page-1;
	$pPrev=($pPrev>=0)?$pPrev:0;
	$pNext=$chk_page+1;
	$pNext=($pNext>=$total_p)?$total_p-1:$pNext;		
	$lt_page=$total_p-4;
	if($chk_page>0){  
		echo "<a  href='$urlfile?s_page=$pPrev&querystr=".$querystr."' class='naviPN'>Prev</a>";
	}
	for($i=$total_start_p;$i<$total_end_p;$i++){  
		$nClass=($chk_page==$i)?"class='selectPage'":"";
		if($e_page*$i<=$total){
		echo "<a href='$urlfile?s_page=$i&querystr=".$querystr."' $nClass  >".intval($i+1)."</a> ";   
		}
	}		
	if($chk_page<$total_p-1){
		echo "<a href='$urlfile?s_page=$pNext&querystr=".$querystr."'  class='naviPN'>Next</a>";
	}
}   
?>
<div id="showData" style="width:550px;margin:auto;padding:10px;border:1px solid #CCC;">
<?php
//////////////////////////////////////// เริ่มต้น ส่วนเนื้อหาที่จะนำไปใช้ในไฟล์ ที่เรียกใช้ด้วย ajax
?>
<ul>
<?php
$q="select * from province_th where 1";
$q.=" ORDER BY province_id  ";
$qr=mysql_query($q);
$total=mysql_num_rows($qr);
$e_page=10; // กำหนด จำนวนรายการที่แสดงในแต่ละหน้า   
if(!isset($_GET['s_page'])){   
	$_GET['s_page']=0;   
}else{   
	$chk_page=$_GET['s_page'];     
	$_GET['s_page']=$_GET['s_page']*$e_page;   
}   
$q.=" LIMIT ".$_GET['s_page'].",$e_page";
$qr=mysql_query($q);
if(mysql_num_rows($qr)>=1){   
	$plus_p=($chk_page*$e_page)+mysql_num_rows($qr);   
}else{   
	$plus_p=($chk_page*$e_page);       
}   
$total_p=ceil($total/$e_page);   
$before_p=($chk_page*$e_page)+1;  
?>
<?php

while($rs=mysql_fetch_array($qr)){
?>
<li><?=$rs['province_name']?></li>
<?php } ?>
</ul>


<?php if($total>0){ ?>
<div class="browse_page">
 <?php   
 // เรียกใช้งานฟังก์ชั่น สำหรับแสดงการแบ่งหน้า   
  page_navigator($before_p,$plus_p,$total,$total_p,$chk_page);    
  ?> 
</div>
<?php } ?>
<?php
////////////////////////////////////////////  จบ ส่วนเนื้อหาที่จะนำไปใช้ในไฟล์ ที่เรียกใช้ด้วย ajax
?>

</div>

ส่วนของการใช้งาน ajax สำหรับโหลดไฟล์ตามหน้าที่ต้องการ
 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	 $(".browse_page a").live("click",function(event){
		 event.preventDefault();
		 var url=$(this).attr("href");
//		 แสดงแบบปกติ
//		 $("#showData").load(url,function(){
//			 
//		 });

//		แสดงแบบ effect  สามารถประยุกต์ effect หรือลูกเล่นอื่นๆ ตามต้องการ
		 $("#showData").animate({
			 opacity:0
		 },100,function(){
			 $("#showData").load(url,function(){
				$("#showData").animate({
			 		opacity:1
				 },200);
			 });			 
		 });

		 return false;
	 });
});
</script>

โค้ดไฟล์ page_navi3_demo_ajax.php ทั้งหมด (รวม 3 ส่วนข้างต้น)
 

<!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" />
<link rel="canonical" href="http://www.ninenik.com/demo/page_navi3_demo.php"/>
<title>ฟังก์ชัน php แบ่งหน้า แบบ ajax แต่งด้วย css สวยๆ</title>
<style type="text/css">
.browse_page{
	clear:both;
	margin-left:12px;
	height:35px;
	margin-top:5px;
	display:block;
}
.browse_page a,.browse_page a:hover{
	display:block;
	height:18px;
	width:18px;
	font-size:10px;
	float:left;
	margin-right:2px;
	border:1px solid #CCCCCC;
	background-color:#F4F4F4;
	color:#333333;
	text-align:center;
	line-height:18px;
	font-weight:bold;
	text-decoration:none;
}
.browse_page a:hover{
	border:1px solid #0A85CB;
	background-color:#0A85CB;
	color:#FFFFFF;
}
.browse_page a.selectPage{
	display:block;
	height:18px;
	width:18px;
	font-size:10px;
	float:left;
	margin-right:2px;
	border:1px solid #0A85CB;
	background-color:#0A85CB;
	color:#FFFFFF;
	text-align:center;
	line-height:18px;
	font-weight:bold;
}
.browse_page a.SpaceC{
	display:block;
	height:18px;
	width:18px;
	font-size:10px;
	float:left;
	margin-right:2px;
	border:0px dotted #0A85CB;
	font-size:11px;
	background-color:#FFFFFF;
	color:#333333;
	text-align:center;
	line-height:18px;
	font-weight:bold;
}
.browse_page a.naviPN{
	width:50px;
	font-size:12px;
	display:block;
	height:18px;
	float:left;
	border:1px solid #0A85CB;
	background-color:#0A85CB;
	color:#FFFFFF;
	text-align:center;
	line-height:18px;
	font-weight:bold;	
}
</style>
</head>

<body>
<?php
$link=mysql_connect("localhost","root","test");
mysql_select_db("test");
mysql_query("set character set utf8");
?>
<?php   
// สร้างฟังก์ชั่น สำหรับแสดงการแบ่งหน้า   
function page_navigator($before_p,$plus_p,$total,$total_p,$chk_page){   
	global $e_page;
	global $querystr;
	$urlfile="ajax_data.php"; // ส่วนของไฟล์เรียกใช้งาน ด้วย ajax (ajax_dat.php)
	$per_page=10;
	$num_per_page=floor($chk_page/$per_page);
	$total_end_p=($num_per_page+1)*$per_page;
	$total_start_p=$total_end_p-$per_page;
	$pPrev=$chk_page-1;
	$pPrev=($pPrev>=0)?$pPrev:0;
	$pNext=$chk_page+1;
	$pNext=($pNext>=$total_p)?$total_p-1:$pNext;		
	$lt_page=$total_p-4;
	if($chk_page>0){  
		echo "<a  href='$urlfile?s_page=$pPrev&querystr=".$querystr."' class='naviPN'>Prev</a>";
	}
	for($i=$total_start_p;$i<$total_end_p;$i++){  
		$nClass=($chk_page==$i)?"class='selectPage'":"";
		if($e_page*$i<=$total){
		echo "<a href='$urlfile?s_page=$i&querystr=".$querystr."' $nClass  >".intval($i+1)."</a> ";   
		}
	}		
	if($chk_page<$total_p-1){
		echo "<a href='$urlfile?s_page=$pNext&querystr=".$querystr."'  class='naviPN'>Next</a>";
	}
}   
?>
<div id="showData" style="width:550px;margin:auto;padding:10px;border:1px solid #CCC;">
<?php
//////////////////////////////////////// เริ่มต้น ส่วนเนื้อหาที่จะนำไปใช้ในไฟล์ ที่เรียกใช้ด้วย ajax
?>
<ul>
<?php
$q="select * from province_th where 1";
$q.=" ORDER BY province_id  ";
$qr=mysql_query($q);
$total=mysql_num_rows($qr);
$e_page=10; // กำหนด จำนวนรายการที่แสดงในแต่ละหน้า   
if(!isset($_GET['s_page'])){   
	$_GET['s_page']=0;   
}else{   
	$chk_page=$_GET['s_page'];     
	$_GET['s_page']=$_GET['s_page']*$e_page;   
}   
$q.=" LIMIT ".$_GET['s_page'].",$e_page";
$qr=mysql_query($q);
if(mysql_num_rows($qr)>=1){   
	$plus_p=($chk_page*$e_page)+mysql_num_rows($qr);   
}else{   
	$plus_p=($chk_page*$e_page);       
}   
$total_p=ceil($total/$e_page);   
$before_p=($chk_page*$e_page)+1;  
?>
<?php

while($rs=mysql_fetch_array($qr)){
?>
<li><?=$rs['province_name']?></li>
<?php } ?>
</ul>


<?php if($total>0){ ?>
<div class="browse_page">
 <?php   
 // เรียกใช้งานฟังก์ชั่น สำหรับแสดงการแบ่งหน้า   
  page_navigator($before_p,$plus_p,$total,$total_p,$chk_page);    
  ?> 
</div>
<?php } ?>
<?php
////////////////////////////////////////////  จบ ส่วนเนื้อหาที่จะนำไปใช้ในไฟล์ ที่เรียกใช้ด้วย ajax
?>

</div>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	 $(".browse_page a").live("click",function(event){
		 event.preventDefault();
		 var url=$(this).attr("href");
//		 แสดงแบบปกติ
//		 $("#showData").load(url,function(){
//			 
//		 });

//		แสดงแบบ effect  สามารถประยุกต์ effect หรือลูกเล่นอื่นๆ ตามต้องการ
		 $("#showData").animate({
			 opacity:0
		 },100,function(){
			 $("#showData").load(url,function(){
				$("#showData").animate({
			 		opacity:1
				 },200);
			 });			 
		 });

		 return false;
	 });
});
</script>
</body>
</html>

ส่วนของไฟล์เรียกใช้งาน ด้วย ajax (ajax_dat.php)
 

<?php
header("Content-type:text/html; charset=UTF-8");        
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);       
?>
<?php
$link=mysql_connect("localhost","root","test");
mysql_select_db("test");
mysql_query("set character set utf8");
?>
<?php   
// สร้างฟังก์ชั่น สำหรับแสดงการแบ่งหน้า   
function page_navigator($before_p,$plus_p,$total,$total_p,$chk_page){   
	global $e_page;
	global $querystr;
	$urlfile="ajax_data.php"; // ส่วนของไฟล์เรียกใช้งาน ด้วย ajax (ajax_dat.php)
	$per_page=10;
	$num_per_page=floor($chk_page/$per_page);
	$total_end_p=($num_per_page+1)*$per_page;
	$total_start_p=$total_end_p-$per_page;
	$pPrev=$chk_page-1;
	$pPrev=($pPrev>=0)?$pPrev:0;
	$pNext=$chk_page+1;
	$pNext=($pNext>=$total_p)?$total_p-1:$pNext;		
	$lt_page=$total_p-4;
	if($chk_page>0){  
		echo "<a  href='$urlfile?s_page=$pPrev&querystr=".$querystr."' class='naviPN'>Prev</a>";
	}
	for($i=$total_start_p;$i<$total_end_p;$i++){  
		$nClass=($chk_page==$i)?"class='selectPage'":"";
		if($e_page*$i<=$total){
		echo "<a href='$urlfile?s_page=$i&querystr=".$querystr."' $nClass  >".intval($i+1)."</a> ";   
		}
	}		
	if($chk_page<$total_p-1){
		echo "<a href='$urlfile?s_page=$pNext&querystr=".$querystr."'  class='naviPN'>Next</a>";
	}
}   
?>
<?php
//////////////////////////////////////// เริ่มต้น ส่วนเนื้อหาที่จะนำไปใช้ในไฟล์ ที่เรียกใช้ด้วย ajax
?>
<ul>
<?php
$q="select * from province_th where 1";
$q.=" ORDER BY province_id  ";
$qr=mysql_query($q);
$total=mysql_num_rows($qr);
$e_page=10; // กำหนด จำนวนรายการที่แสดงในแต่ละหน้า   
if(!isset($_GET['s_page'])){   
	$_GET['s_page']=0;   
}else{   
	$chk_page=$_GET['s_page'];     
	$_GET['s_page']=$_GET['s_page']*$e_page;   
}   
$q.=" LIMIT ".$_GET['s_page'].",$e_page";
$qr=mysql_query($q);
if(mysql_num_rows($qr)>=1){   
	$plus_p=($chk_page*$e_page)+mysql_num_rows($qr);   
}else{   
	$plus_p=($chk_page*$e_page);       
}   
$total_p=ceil($total/$e_page);   
$before_p=($chk_page*$e_page)+1;  
?>
<?php

while($rs=mysql_fetch_array($qr)){
?>
<li><?=$rs['province_name']?></li>
<?php } ?>
</ul>


<?php if($total>0){ ?>
<div class="browse_page">
 <?php   
 // เรียกใช้งานฟังก์ชั่น สำหรับแสดงการแบ่งหน้า   
  page_navigator($before_p,$plus_p,$total,$total_p,$chk_page);    
  ?> 
</div>
<?php } ?>
<?php
////////////////////////////////////////////  จบ ส่วนเนื้อหาที่จะนำไปใช้ในไฟล์ ที่เรียกใช้ด้วย ajax
?>

 

]]>Mon, 11 Oct 2010 13:23:49 +0700แนวทาง การสร้าง ระบบตรวจสอบ การล็อกอิน อย่างง่าย ด้วย ajax ใน jQuery และ phphttp://www.ninenik.com/แนวทาง_การสร้าง_ระบบตรวจสอบ_การล็อกอิน_อย่างง่าย_ด้วย_ajax_ใน_jQuery_และ_php-348.htmlวิธีการต่อไปนี้ เป็นแนวทางเบื้องต้น สำหรับการทำระบบล็อกอิน ด้วย ajax อย่างง่าย
ไฟล์สำหรับหน้าล็อกอิน สมมติเป็น index.php  ประกอบด้วยฟอร์มสำหรับล็อกอิน
 

<form id="form_login_x" name="form_login_x" method="post" action="">
  User:
  <input type="text" name="textfield" id="textfield" />
  Pass:
  <input type="text" name="textfield2" id="textfield2" />
  <input type="submit" name="LoginBT" id="LoginBT" value="Login" />
</form>

สิ่งที่จำเป็นต้องกำหนด
id ของฟอร์ม ในที่นี้ <form id="form_login_x"
id ของส่วนกรอกชื่อผู้ใช้ id="user_name"
id ของส่วนกรอกรหัสผ่าน  id="user_pass"
กำหนดเพื่อไว้สำหรับอ้างอิงในการใช้งานกับ javascript

ตัวอย่างโครงสร้าง ส่วนของฐานข้อมูลสำหรับทดสอบ
 

-- 
-- Table structure for table `tbl_user`
-- 

CREATE TABLE `tbl_user` (
  `user_id` int(11) NOT NULL auto_increment,
  `user_name` varchar(100) NOT NULL,
  `user_pass` varchar(100) NOT NULL,
  PRIMARY KEY  (`user_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=2 ;

-- 
-- Dumping data for table `tbl_user`
-- 

INSERT INTO `tbl_user` VALUES (1, 'admin', '12345');

ส่วนของ javascript สำหรับส่งข้อมูลไปตรวจสอบ

 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	
	$("#form_login_x").submit(function(){ // เมื่อมีการ submit ฟอร์ม ล็อกอิน
		// ส่งข้อมูลไปตรวจสอบที่ไฟล์ check_login.php แบบ post ด้วย ajax
		$.post("check_login.php",$("#form_login_x").serialize(),function(data){
			if(data==1){ // ตรวจสอบผลลัพธ์
				// ถ้าล็อกอินผ่าน ให้ลิ้งค์ไปที่หน้า main_page.php
				window.location='main_page.php';
			}else{
				/// คำสั่งหรือแจ้งเตือนกรณีล็อกอินไม่ผ่าน
				$("#form_login_x")[0].reset();
			}
		});
		return false;
	});
	
});
</script>

ส่วนของไฟล์สำหรับตรวจสอบการล็อกอิน สมมติใช้ check_login.php
 

<?php
session_start();
header("Content-type:text/html; charset=UTF-8");              
header("Cache-Control: no-store, no-cache, must-revalidate");             
header("Cache-Control: post-check=0, pre-check=0", false);   
// ส่วนของการเชิ่อมต่อกับฐานข้อมูล   
mysql_connect("localhost","root","test") or die("Cannot connect the Server");   
mysql_select_db("test") or die("Cannot select database");   
mysql_query("set character set utf8");   

if($_POST['user_name']!="" && $_POST['user_pass']!=""){
 	$q="SELECT * FROM tbl_user WHERE user_name='".$_POST['user_name']."' ";
	$q.=" AND user_pass='".$_POST['user_pass']."' LIMIT 1 ";
	$qr=mysql_query($q);
	if(mysql_num_rows($qr)>0){
		$rs=mysql_fetch_array($qr);
		// $_SESSION['ses_user']=$rs['user_id'];  // สร้างตัวแปร session ตามต้องการ
		echo "1";  // เมื่อล็อกอินผ่าน
	}else{
		echo "0";	
	}
}else{
	echo "0";	
}
?>

ส่วนสุดท้าย ในไฟล์ main_page.php ให้ตรวจสอบ session ที่สร้างจากไฟล์ check_login.php
ถ้าไม่มีตัวแปร session ตามที่กำหนด ให้กลับมาที่หน้าล็อกอิน
 

<?php
session_start();
if(!isset($_SESSION['ses_user']) || $_SESSION['ses_user']==""){
	header("Location:index.php");	
}
// ใส่ไว้ด้านบนของไฟล์สำหรับ เช็คว่าเป็น user หรือไม่
?>

ตัวอย่างโค้ดไฟล์ทั้งหมด
ไฟล์ index.php หน้าล็อกอิน

<!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></title>
</head>

<body>
<form id="form_login_x" name="form_login_x" method="post" action="">
  User:
  <input type="text" name="user_name" id="user_name" />
  Pass:
  <input type="text" name="user_pass" id="user_pass" />
  <input type="submit" name="LoginBT" id="LoginBT" value="Login" />
</form>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	
	$("#form_login_x").submit(function(){ // เมื่อมีการ submit ฟอร์ม ล็อกอิน
		// ส่งข้อมูลไปตรวจสอบที่ไฟล์ check_login.php แบบ post ด้วย ajax
		$.post("check_login.php",$("#form_login_x").serialize(),function(data){
			if(data==1){ // ตรวจสอบผลลัพธ์
				// ถ้าล็อกอินผ่าน ให้ลิ้งค์ไปที่หน้า main_page.php
				window.location='main_page.php';
			}else{
				/// คำสั่งหรือแจ้งเตือนกรณีล็อกอินไม่ผ่าน
				$("#form_login_x")[0].reset();
			}
		});
		return false;
	});
	
});
</script>
</body>
</html>

ไฟล์ check_login.php สำหรับตรวจสอบการล็อกอิน

<?php
session_start();
header("Content-type:text/html; charset=UTF-8");              
header("Cache-Control: no-store, no-cache, must-revalidate");             
header("Cache-Control: post-check=0, pre-check=0", false);   
// ส่วนของการเชิ่อมต่อกับฐานข้อมูล   
mysql_connect("localhost","root","test") or die("Cannot connect the Server");   
mysql_select_db("test") or die("Cannot select database");   
mysql_query("set character set utf8");   

if($_POST['user_name']!="" && $_POST['user_pass']!=""){
 	$q="SELECT * FROM tbl_user WHERE user_name='".$_POST['user_name']."' ";
	$q.=" AND user_pass='".$_POST['user_pass']."' LIMIT 1 ";
	$qr=mysql_query($q);
	if(mysql_num_rows($qr)>0){
		$rs=mysql_fetch_array($qr);
		// $_SESSION['ses_user']=$rs['user_id'];  // สร้างตัวแปร session ตามต้องการ
		echo "1";  // เมื่อล็อกอินผ่าน
	}else{
		echo "0";	
	}
}else{
	echo "0";	
}
?>

ไฟล์หน้าหลักจะสามารถเข้าใช้งานได้ เมื่อล็อกอินผ่านเท่านั้น main_page.php หรือไฟล์อื่นๆ
 

<?php
session_start();
if(!isset($_SESSION['ses_user']) || $_SESSION['ses_user']==""){
	header("Location:index.php");	
}
// ใส่ไว้ด้านบนของไฟล์สำหรับ เช็คว่าเป็น user หรือไม่
?>

เนื้อหาเบื้องต้นเป็นแนวทาง ความต้องการที่เหนือกว่า ขึ้นอยู่กับการประยุกต์ใช้งานของแต่ละคน

]]>Wed, 29 Sep 2010 08:00:00 +0700เทคนิค ประยุกต์ใช้ ajax ใน jQuery ร่วมกับ iframe กับการอัพโหลดรูปhttp://www.ninenik.com/เทคนิค_ประยุกต์ใช้_ajax_ใน_jQuery_ร่วมกับ_iframe_กับการอัพโหลดรูป-306.htmlโดยทั่วไป jQuery จะมี method ที่ชื่อ serialize() สำหรับส่งค่าข้อมูลจากฟอร์มแบบ ajax
ตัวอย่าง
 

$.post("update.php",$("#form1").serialize());	
// จากโค้ดด้านบน เป็นการส่งค่า แบบ post โดยทำการส่งค่าต่างๆ ในฟอร์ม
// ที่มี id ฃื่อ form1 ไปยังไฟล์ update.php ในลักษณะ ajax

แต่ด้วยข้อจำกัดในเรื่องของความปลอดภัย ทำให้ input type='file' หรือ element ประเภท อัพโหลดรูป หรืออัพโหลดไฟล์ ไม่สามารถส่งค่าไปด้วยคำสั่งข้างต้นได้ 

อย่างไรก็ตาม เราสามารถนำ iframe มาประยุกต์ใช้ ร่วมกับฟังก์ชัน ดังกล่าว ได้ ด้วยแนวทางดังนี้
- เมื่อคลิกที่ปุ่มส่งข้อมูล ให้ทำการอัพโหลดไฟล์รูปภาพ ผ่านการ submit ฟอร์มทั่วไป แต่ให้ยิง target ไปที่ชื่อของ iframe ที่เราตั้งไว้
- และถ้ามีการอัพโหลดรูปภาพ ให้ทำการส่งค่า หรือชื่อรูปภาพที่อัพโหลด กลับมาที่ parent หรือไฟล์หลัก ด้วย javascript ฟ้งก์ชัน
- ใช้ javascript ฟังก์ชัน นั้นนำค่าชื่อรูปภาพที่ได้ ไปกับไว้ในไฟล์ hidden
- จากนั้นเรียกใช้ method ของ jQuery ที่ชื่อ serialize() เพื่อส่งค่าต่างไปยังไฟล์ เพื่อบันทึกลงฐานข้อมูล

ตัวอย่างโค้ดไฟล์ ajax_jquery_input_file.php
 

<!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 input file</title>

</head>

<body>

<form action="update_data.php" target="up_iframe" method="post" 
enctype="multipart/form-data" name="form1" id="form1">
  <input type="text" name="data1" id="data1" />
  <br />
  <input type="file" name="fileup" id="fileup" value="" />
  <input name="h_pic" type="hidden" id="h_pic" value="" />
<br />
<button type="button" id="iSubmit">Submit</button>
</form>
<iframe name="up_iframe" width="0" height="0" frameborder="0"></iframe>
<hr />
<div id="ShowData"></div>
<script language="javascript" src="js/jquery-1.4.1.min.js"></script>   
<script type="text/javascript">
$(function(){
	$("#iSubmit").click(function(){
		$("#form1")[0].submit();
	});
});
function setVal(dataVar){
	$("#h_pic").val(dataVar);
	$.post("update_data.php",$("#form1").serialize(),function(gData){
		$("#form1")[0].reset();		
		$("#ShowData").html(gData);	
	});		
}
</script>

</body>
</html>

ตัวอย่างโค้ดไฟล์ update_data.php
 

<?php
header("Content-type:text/html; charset=UTF-8");              
header("Cache-Control: no-store, no-cache, must-revalidate");             
header("Cache-Control: post-check=0, pre-check=0", false);   
function upimg($img,$imglocate){ // ฟังก์ชันสำหรับอัพโหลดรูปภาพอย่างง่าย
			global $file_up;
			if($img['name']!=''){
			$fileupload1=$img['tmp_name'];
			$g_img=explode(".",$img['name']);
			$file_up=time().".".$g_img[1];
				if($fileupload1){
					$array_last=explode(".",$file_up);
					$c=count($array_last)-1;
					$lastname=strtolower($array_last[$c]);
					if($lastname=="gif" or $lastname=="jpg" or $lastname=="jpeg" or $lastname=="swf" or $lastname=="png"){					
						@copy($fileupload1,$imglocate.$file_up);			
					}	
				}				
			}
		return $file_up;
}
?>
<?php
if(count($_POST)>0){
	echo "<pre>";
	print_r($_POST);
	echo "<pre>";
	echo "<img src='upimg/".$_POST['h_pic']."' width='100' />";
	if(count($_FILES)>0){
		$upFile=upimg($_FILES['fileup'],"upimg/");
		 echo "<script>parent.setVal('".$upFile."');</script>";
	}		
	exit;
}
?>

ตัวอย่าง
http://www.ninenik.com/demo/ajax_jquery_input_file.php

]]>Sat, 31 Jul 2010 22:10:24 +0700แนวทาง การดึงข้อมูล แบบ real time ด้วย ajax ใน jQuery http://www.ninenik.com/แนวทาง_การดึงข้อมูล_แบบ_real_time_ด้วย_ajax_ใน_jQuery_-284.html
เว็บที่มีการเปลี่ยนแปลงแบบ real time ที่ไม่ต้องโหลดหน้าจอใหม่ ปกติจะใช้ ajax การทำให้ข้อมูลมีการเปลี่ยนแปลง ตลอดเวลา จำป็นต้องใช้เวลาเป็นตัวกำหนด หรือคือการกำหนดให้ มีการดึงข้อมูลใหม่ มาแสดงด้วย ajax ตามเวลาที่กำหนด

ตัวอย่างต่อไปนี้เป็นแนวทาง การใช้งาน เป็นการดึงข้อมูลด้วย ajax โดยเอาวันที่ และเวลา มาแสดง โนที่ที่ต้องการแสดงทุก 3 วินาที

1.สร้าง html tag กำหนด พื้นที่ หรือส่วนที่ต้องการแสดงผล 

<div id="showData"></div>

2.สร้างไฟล์ สำหรับหาวันที่ และเวลา มาแสดง ชื่อ gdata.php

<?php   
header("Content-type:text/html; charset=UTF-8");        
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);       
if($_GET['rev']==1){
	echo date("Y-m-d H:i:s");
	exit;
}
?>

3.สร้าง ajax สคริปสำหรับเรียกใช้งาน

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	setInterval(function(){ // เขียนฟังก์ชัน javascript ให้ทำงานทุก ๆ 30 วินาที
		// 1 วินาที่ เท่า 1000
		// คำสั่งที่ต้องการให้ทำงาน ทุก ๆ 3 วินาที
		var getData=$.ajax({ // ใช้ ajax ด้วย jQuery ดึงข้อมูลจากฐานข้อมูล
				url:"gdata.php",
				data:"rev=1",
				async:false,
				success:function(getData){
					$("div#showData").html(getData); // ส่วนที่ 3 นำข้อมูลมาแสดง
				}
		}).responseText;
	},3000);	
});
</script>

ตัวอย่าง

การดึงข้อมูล แบบ real time ด้วย ajax

]]>Wed, 12 May 2010 21:08:02 +0700แก้ปัญหา ปุ่ม back ปุ่ม forward กับการใช้งาน ajax โหลดหน้าเพจ ด้วย jQuery plugin อย่างง่ายhttp://www.ninenik.com/แก้ปัญหา_ปุ่ม_back_ปุ่ม_forward_กับการใช้งาน_ajax_โหลดหน้าเพจ_ด้วย_jQuery_plugin_อย่างง่าย-282.htmlในกรณีที่มีการ ใช้งาน ajax เพื่อทำการโหลดเนื้อหาบางส่วนของเว็บไซต์ กับการใช้งานปุ่ม back ปุ่ม forward ในบราวเซอร์ ที่ไม่สอดคล้องกัน เราสามารถใช้  plugin ของ jQuery มาแก้ปัญหานี้ได้

ดูเนื้อหา และรายละเอียดทั้งหมด ด้วยตัวเองได้ที่ลิ้งค์

http://www.asual.com/jquery/address/docs/#sample-usage

ดาวน์โหลดไฟล์ต้นฉบับ พร้อมตัวอย่างได้ที่

http://www.asual.com/blog/jquery/2010/05/05/jquery-address-12-ajax-crawling-url-building-and-more.html

ต่อไปนี้เป็นตัวอย่างการนำมาใช่งานอย่างง่าย

สร้างไฟล์ gdata.php สำหรับรับค่า

<?php
header("Content-type:text/html; charset=UTF-8");     
header("Cache-Control: no-store, no-cache, must-revalidate");    
header("Cache-Control: post-check=0, pre-check=0", false);    
if($_GET['gDate']){
	echo date("Y-m-d");
	exit;
}
if($_GET['gTime']){
	echo date("H:i:s");	
	exit;
}
if($_GET['gText']){
	echo "Text";	
	exit;
}
?>

ไฟล์ทดสอบ HTML และ JavaScript ไฟล์

<!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 back button</title>
</head>

<body>

<a href="#gDate">Get Date</a>
<a href="#gTime">Get Time</a>
<a href="#gText">Get Text</a>

<div id="dataShow">

</div>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.address-1.2.min.js?tracker=track"></script>
<script type="text/javascript">
$(function(){
	
	$.address.init(function(event) {
		
   }).change(function(event) {
	   var goAnchor=event.value;
	   var url="gdata.php";
		switch(goAnchor){
			case "/gDate":
				$("div#dataShow").load(url+"?gDate=1");
				break;
			case "/gTime":
				$("div#dataShow").load(url+"?gTime=1");
				break;
			case "/gText":
				$("div#dataShow").load(url+"?gText=1");
				break;	
		}
	});
	$('a').address(); 	
});
</script>
</body>
</html>

ตัวอย่าง

แก้ปัญหา ปุ่ม back ปุ่ม forward กับการใช้งาน ajax โหลดหน้าเพจ ด้วย jQuery plugin

]]>Mon, 10 May 2010 07:00:00 +0700สร้าง poll แบบสำรวจ ด้วย ajax ใน jQuery อย่างง่ายhttp://www.ninenik.com/สร้าง_poll_แบบสำรวจ_ด้วย_ajax_ใน_jQuery_อย่างง่าย-280.htmlตัวอย่าง

สร้าง poll แบบสำรวจ ด้วย ajax ใน jQuery อย่างง่าย

Code ตัวอย่าง

 

<?php
// สร้างฟังก์ชันเขียนไฟล์
function write($path, $content, $mode="w+"){
    if (file_exists($path) && !is_writeable($path)){ return false; }
    if ($fp = fopen($path, $mode)){
        fwrite($fp, $content);
        fclose($fp);
    }
    else { return false; }
    return true;
}
// การใช้งาน โมดเขียนไฟล์เริ่มต้น  w+ 
//write("poll1.txt","ทดสอบ","w+");
if($_GET['voteID']!=""){
header("Content-type:text/html; charset=UTF-8");     
header("Cache-Control: no-store, no-cache, must-revalidate");    
header("Cache-Control: post-check=0, pre-check=0", false);  		
	$gPoll=file("poll1.txt");
	$newData="";
	$chartTitle="";
	$numRowChart=$_GET['startKey']-1;
	foreach($gPoll as $key=>$value){
		if($key==0){
			$chartTitle=trim($value);
		}
		if($_GET['voteID']+$_GET['startKey']==$key){
			$value=intval($value)+1;
			$newData.=$value."\r\n";
		}else{
			$newData.=$value;
		}
	}
	write("poll1.txt",$newData,"w+");
?>
{
	"ChoiceTitle":[
<?php  
$gPoll=file("poll1.txt");
foreach($gPoll as $key=>$value){
	if($key>0 && $key<$_GET['startKey']){
?>
    	{"choiceData":"<?=trim($value)?> (<?=trim($gPoll[$key+$_GET['startKey']])?>)","score":<?=trim($gPoll[$key+$_GET['startKey']])?>},
<?php
	}
}
?>
    ],
    "chartTitle":"<?=trim($chartTitle)?>",
    "numRowsChart":<?=$numRowChart?>
    
}
<?php
	exit;
}
?>
<!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 poll jquery google</title>
<style type="text/css">
body{
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;	
}
#pollDiv{
	display:block;
	width:200px;
	height:250px;
	background-color:#F4F4F4;	
}
</style>

</head>

<body>

<!--Div that will hold the pie chart--> 
    <div id="chart_div"></div> 


<div id="pollDiv">
<?php
$gPoll=file("poll1.txt");
foreach($gPoll as $key=>$value){
	if($key==0){
		echo "<strong>".$value."</strong><br>";
	}else{
		if(trim($value)!=""){
			echo '<input type="radio" name="choice" id="radio" value="'.$key.'" />';
			echo $value."<br>";
		}else{
			echo '<input type="button" name="VotePoll" id="VotePoll" value="Vote" />';
			break;	
		}
	}
}

?>

</div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.load("visualization", "1", {packages:["columnchart"]}); 
</script>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	var checkCondi=0;
	var chooseKey="";
	var startKey=$("input[name=choice]").size()+1;
	$("#VotePoll").click(function(){
		$("input[name=choice]").each(function(key){
			var condi=$("input[name=choice]").eq(key).attr("checked");
			if(condi==true){
				checkCondi=1;
				chooseKey=key+1;
			}
		});
		if(checkCondi==1){
			var loading_obj='<p id="i_loading" align="center"><img src="http://www.ninenik.com/ajax.gif" /></p>'; 
			 $("div#pollDiv").html(loading_obj); 
			var resultData=$.ajax({
				url:"ajax_poll_jquery_google.php",
				data:"voteID="+chooseKey+"&startKey="+startKey,
				async:false,
				success:function(resultData){
					var myObject = eval('(' + resultData + ')');
					$("div#pollDiv").html("");
					var data = new google.visualization.DataTable(); 
					data.addColumn('string', 'Choice Poll'); 
					data.addColumn('number', 'Score Point'); 
					data.addRows(myObject.numRowsChart);

					for(i=0;i<myObject.numRowsChart;i++){
						data.setCell(i, 0, myObject.ChoiceTitle[i].choiceData);
						data.setCell(i, 1, myObject.ChoiceTitle[i].score);
					}					
					var chart = new google.visualization.PieChart(document.getElementById('pollDiv')); 
					chart.draw(data, {
						width: 250, 
						height: 300, 
						is3D: true,
						legend:'bottom',
						legendFontSize:13, 
						titleFontSize:12,
						title:myObject.chartTitle
					}); 
				}
			}).responseText;
		}
	});
});
</script>

</body>
</html>

ไฟล์ text สำหรับสร้างแบบสำรวจ

poll1.txt

]]>Thu, 06 May 2010 23:28:26 +0700ประยุกต์ ใช้งาน php และ ajax ใน jQuery แสดงผลลัพธ์ คล้าย twitterhttp://www.ninenik.com/ประยุกต์_ใช้งาน_php_และ_ajax_ใน_jQuery_แสดงผลลัพธ์_คล้าย_twitter-279.htmlตัวอย่าง

ประยุกต์ ใช้งาน php และ ajax ใน jQuery แสดงผลลัพธ์ คล้าย twitter

Code ตัวอย่าง

<?php
session_start();
$link=mysql_connect("localhost","root","test") or die("error".mysql_error());   
mysql_select_db("test_db",$link);   
mysql_query("set character set utf8");	

$showPerPage=23;
?>
<?php
if($_GET['gopage']){
$q=$_SESSION['ses_more_show'];
$q.="   LIMIT ".$_GET['gopage'].",$showPerPage ";
$qr=mysql_query($q);
$total_data=mysql_num_rows($qr);
if($total_data>0){
echo '<hr style="height:1px;background-color:#F4F4F4;" />';
while($rs=mysql_fetch_array($qr)){
echo "<span>".$rs['name_province']."</span><br />";
}
}else{
echo "-1";
}
	exit;
}
?>
<!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>ใช้งาน php และ ajax ใน jQuery แสดงผลลัพธ์ คล้าย twitter</title>
<style type="text/css">
div#resultDiv{
	margin:auto;
	width:500px;
	padding:5px;	
}
#showMore{
	width:450px;
	text-align:center;
	height:30px;
	cursor:pointer;
	font-size:18px;
	font-weight:bold;
	color:#06F;
	border:1px solid #EAEAEA;
	background-color:#F8F8F8;
}
#showMore:hover{
	color:#06F;
	border:1px solid #EAEAEA;
	background-color:#E3ECFD;
}
</style>
</head>

<body>

<div id="resultDiv">
<?php
if(!isset($posi_first)){
	$posi_first=0;	
}
$q="SELECT * FROM  province  ORDER BY name_province   ";
$_SESSION['ses_more_show']=$q;
$qr=mysql_query($q);
$total_data=mysql_num_rows($qr);
$q.=" LIMIT $posi_first,$showPerPage ";
$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
?>
<span><?=$rs['name_province']?></span><br />
<?php } ?>


</div>

<input name="gopage" type="hidden" id="gopage" value="<?=$posi_first+$showPerPage?>" />
<input name="h_total_data" type="hidden" id="h_total_data" value="<?=$total_data?>" />
<?php if($total_data>$showPerPage){ ?>
<div style="margin:auto;text-align:center;">
<input type="button" name="showMore" id="showMore" value="more" />
</div>
<?php } ?>

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	var showPerPage=23;
	$("#showMore").click(function(){	
		$(this).hide();
		var loading_obj='<p id="i_loading" align="center"><img src="http://www.ninenik.com/ajax.gif" /></p>';
		$("div#resultDiv").append(loading_obj);
		var i_gopage=parseInt($("#gopage").val());
		var i_setpage=parseInt($("#gopage").val())+showPerPage;
		$("#gopage").val(i_setpage);
		var moreHTML=$.ajax({
			url:"jquery_more_twitter.php",
			data:"gopage="+i_gopage,
			async:false
		}).responseText;		
		setTimeout(function(){
			$("p#i_loading").remove();
			if(moreHTML!="-1"){
			$("div#resultDiv").append(moreHTML);
				if(i_setpage<$("#h_total_data").val()){
					$("#showMore").show();
				}
			}
		},1500);				
	});	
});
</script>
</body>
</html>

 

]]>Tue, 04 May 2010 07:08:08 +0700ใช้งาน ajax ใน jQuery ดึงข้อมูลจากฐานข้อมูลมาแสดง ใน tooltiphttp://www.ninenik.com/ใช้งาน_ajax_ใน_jQuery_ดึงข้อมูลจากฐานข้อมูลมาแสดง_ใน_tooltip-278.htmlอาศัยการประยุกต์ จากหัวข้อ

http://www.ninenik.com/ประยุกต์_tooltip_มากกว่า_1_ตัวใน_ฟอร์ม_ด้วย_jQuery-277.html

โดยส่วนที่เพิ่มเข้ามา คือการใช้งาน ajax ด้วย jQuery เพิ่มดึงข้อมูลมาแสดง

ตัวอย่างต่อไปนี้คือแนวทาง ภายใต้เงื่อนไขความต้องการ คือ

ต้องการแสดง ข้อมูลสมาชิก เมื่อ เอาเมาส์วางไว้เหนือรูปภาพของสมาชิกนั้นๆ
โดยกำหนด รูปภาพดังนี้

<img src="img/avatar/user.gif" width="50" height="50" title="10" class="userInfo" />

คือ กำหนด ให้มี attribute ชื่อ title เพื่อเก็บ id ของสมาชิก และ class เพื่อใช้สำหรับการแสดง
tooltip

จากนั้นสร้างไฟล์สำหรับแสดงข้อมูลของสมาชิก ที่ดึงข้อมูลจากฐานข้อมูล โดยกำหนดรูปแบบ
การแสดงผล ตามต้องการ ในที่นี้ใช้ชื่อ getUserInfo.php โดยจะทำการรับค่า id ของสมาชิกมา
แล้วไปตรวจสอบในฐานข้อมูล แล้วนำชื่อของสมาชิกนั้นๆ มาแสดง
ซึ่งจะทำงานในรูปแบบ ajax ด้วย jQuery ดังนี้

ตัวอย่าง ไฟล์ getUserInfo.php

<?php
session_start();
header("Content-type:text/html; charset=UTF-8");     
header("Cache-Control: no-store, no-cache, must-revalidate");    
header("Cache-Control: post-check=0, pre-check=0", false);    
// ส่วนของการติดต่อฐานข้อมูล
$link=mysql_connect("localhost","root","test");  
mysql_select_db("test");  

if($_GET['member_id']!=""){
	$q="SELECT member_name  FROM member WHERE member_id='".$_GET['member_id']."' ";
	$qr=mysql_query($q);
	if(@mysql_num_rows($qr)>0){
		$rs=mysql_fetch_array($qr);
		// กำหนดรูปแบบการแสดงผลตามต้องการ ในที่นี้แสดงแค่ชื่อ
		echo $rs['member_name'];
	}
}
?>

HTML Code ตัวอย่าง

<img src="img/avatar/user.gif" width="50" height="50" title="10" class="userInfo" />

<!-- ส่วนสำหรับนำข้อมูลมาแสดง -->
<span class='iTooltip' id="showUserInfo"></span>

CSS สำหรับกำหนดรูปแบบการแสดงผล

<style type="text/css"> 
/* css สำหรับกำหนดรูปแบบของกล่องข้อความ Tooltip */
.iTooltip{
	position:absolute;
	border:1px solid #FFCC66;
	background-color:#FFFFCC;
	color:#000000;
	display:none;
	padding:5px;
/*	width:200px;*/
	font-size:12px;
}
</style>

Javascript Code 

<script language="javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("img.userInfo").hover(function(event){ // img.userInfo คือ แท็ก img ที่มี class เท่ากับ userInfo
		var userID=$(this).attr("title"); // id ของสมาชิกที่ตรงในฐานข้อมูล
		var dataUser=$.ajax({
			url:"getUserInfo.php",
			data:"member_id="+userID,
			success:function(dataUser){
				callTooltip("#showUserInfo",event,dataUser); 
			}
		}).responseText;		
	},function(){
		$("#showUserInfo").hide();
	});

});
function callTooltip(obj,event,strText){ // ฟังก์ชั่นแสดงกล่องข้อความ Tooltip
		var locateX=event.pageX;   
        var locateY=event.pageY; 
		locateX+=10;
		locateY+=10;
		$(obj).show().css({
			left:locateX,
			top:locateY
		}).html(strText);				
}
</script>

 

]]>Sun, 02 May 2010 15:22:11 +0700ดึงไฟล์ xml (rss) ไฟล์แบบ cross domain มาแสดงด้วย ajax ใน jQuery อย่างง่ายhttp://www.ninenik.com/ดึงไฟล์_xml_(rss)_ไฟล์แบบ_cross_domain_มาแสดงด้วย_ajax_ใน_jQuery_อย่างง่าย-250.html การดึง ข้อมูลจาก xml ไฟล์มาใช้ในเว็บ จะใช้ข้อมูลประมาณ 3 - 4 ข้อมูล ได้แก่ 

1.หัวข้อ title 
2.ลิ้งค์ที่อยู่ url 
3.รูปภาพประกอบ image
4.วันที่ date
 
แต่ในที่นี่จะแสดงตัวอย่างการดึงข้อมูล 2 ข้อมูลมาแสดง คือ หัวข้อ title และ ลิ้งค์ที่อยู่ url
โดยสามารถทำตามขั้นตอน ได้ดังต่อไปนี้
1.สรัางไฟล์ php เรียก ข้อมูล xml มาแสดง ชื่อ gXML.php
<?php
if(isset($_GET['url'])){
header("Content-type:text/xml; charset=UTF-8");   
header("Cache-Control: no-store, no-cache, must-revalidate");      
header("Cache-Control: post-check=0, pre-check=0", false);  
echo $gXML=file_get_contents($_GET['url']);
exit;
}
?>
2.HTML code ในไฟล์สำหรับ แสดงข้อมูล
<div id="showRSS">
<ul>

</ul>
</div>
3.Javascript Code สำหรับดึงข้อมูล
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript">
$(function(){
	var gXML=$.ajax({
		url: "gXML.php?url=http://www.ninenik.com/rss2.xml",
		async: false, 
		success:function(gXML){ 	
			var NumItem=$(gXML).find("item").length; 
			var titleRSS=null;
			var linkRSS=null;
			for(var i=0;i<NumItem;i++){
				titleRSS=$(gXML).find("item title").eq(i).text();
				linkRSS=$(gXML).find("item link").eq(i).text();
				$("div#showRSS ul").append("<li><a href='"+linkRSS+"' target='_blank'>"+titleRSS+"</a></li>");
			}
		}
	}).responseText;
});
คำอธิบาย
บรรทัดที่ 8 กำหนด url ของ xml ไฟล์ที่ต้องการนำมาแสดง
บรรทัดที่ 11 กำหนดตัวแปรเก็บจำนวนรายการทั้งหมด สามารถกำหนดเป็นตัวเลขที่ต้องการแสดงได้
บรรทัดที่ 12 กำหนดตัวแปรเก็บหัวเรื่อง
บรรทัดที่ 13 กำหนดตัวแปรเก็บ url
บรรทัดที่ 14 วนลูปแสดงรายการใน xml
บรรทัดที่ 15 ดึงข้อมูลหัวข้อจาก xml ไฟล์เก็บในตัวแปร titleRSS
บรรทัดที่ 16 ดึงข้อมูล url สำหรับลิ้งค์ มาเก็บในตัวแปร linkRSS
บรรทัดที่ 17 แสดงข้อมูลใน div
 
ทั้งหมดนี้ สามารถนำไปประยุกต์ใช้ กับ xml ไฟล์ที่ไม่ใช่ rss  ได้
 
หากต้องการปรับแต่งการแสดงผล สามารถกำหนด โดยแทรก css code ตัวไปนี้
 
<style type="text/css">
/* style สำหรับ list รายการ */
div#showRSS ul,div#showRSS ul li{
	
}
/* style สำหรับ list รายการ */
div#showRSS ul li{

}
/* style สำหรับ link */
div#showRSS ul li a{
	font-family:Arial, "times New Roman", tahoma;
	font-size:12px;
	color:#000000;	
	text-decoration:none;
}
/* style สำหรับ link เมื่อเมาส์อยู่เหนือ */
div#showRSS ul li a:hover{
	font-family:Arial, "times New Roman", tahoma;
	font-size:12px;	
	font-weight:bold;
	color:#FF3300;
	background-color:#F5F5F5;
	text-decoration:none;
}
</style>
 ตัวอย่าง คลิก http://www.ninenik.com/demo/jquery_xml.php
 
]]>Mon, 04 Jan 2010 20:22:41 +0700สร้างระบบ สมาชิกออนไลน์ member online ด้วย php และ ajax ใน jQuery อย่างง่ายhttp://www.ninenik.com/สร้างระบบ_สมาชิกออนไลน์_member_online_ด้วย__php_และ_ajax_ใน_jQuery_อย่างง่าย-235.html1.สร้างตารางในฐานข้อมูล 

CREATE TABLE `memberonline` (
  `onlineID` int(11) NOT NULL auto_increment,
  `onlineMemberID` int(11) NOT NULL,
  `onlineMemberName` varchar(100) NOT NULL,
  `onlineTimestamp` int(11) NOT NULL,
  PRIMARY KEY  (`onlineID`)
) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_general_ci;
2.สร้างไฟล์สำหรับแสดงจำนวนสมาชิกออนไลน์ และ รายชื่อสมาชิก เป็น gmemberonline.php 
<?php
session_start();
header("Content-type:text/html; charset=UTF-8");     
header("Cache-Control: no-store, no-cache, must-revalidate");    
header("Cache-Control: post-check=0, pre-check=0", false);    
// ส่วนของการติดต่อฐานข้อมูล
$link=mysql_connect("localhost","root","test");  
mysql_select_db("test");  


$memberNameOnline=""; // กำหนดตัวแปรสำหรับเก็บชื่อสมาชิกที่ออนไลน์
$q="SELECT onlineMemberID,onlineMemberName  FROM memberonline WHERE 1";
$qr=mysql_query($q);
$numMemberOnline=mysql_num_rows($qr); // เก็บจำนวนสมาชิกที่ออนไลน์
while($rs=mysql_fetch_array($qr)){
	$memberNameOnline.=$rs['onlineMemberName']."<br>"; // เก็บชื่อสมาชิกที่ออนไลน์
}
echo "$numMemberOnline Member Online<br>"; // แสดงจำนวนสมาชิกที่ออนไลน์
echo	  $memberNameOnline; // แสดงชื่อสมาชิก


/*
แก้ไขตัวแปร session  ในที่นี้ใช้ 
$_SESSION['ses_memberID'] เก็บ  id ของสมาชิก
$_SESSION['ses_memberName']  เก็บ ชื่อของสมาชิก
ให้แก้ไขตัวแปรตาม ทั้งสองข้างต้นตามต้องการ
*/
if(isset($_SESSION['ses_memberID']) && $_SESSION['ses_memberID']!=""){
	$q="SELECT * FROM memberonline WHERE onlineMemberID='".$_SESSION['ses_memberID']."' ";
	if(mysql_num_rows(mysql_query($q))<=0){
	$q="INSERT INTO  `memberonline` (
	`onlineID` ,
	`onlineMemberID` ,
	`onlineMemberName` ,
	`onlineTimestamp`
	)
	VALUES (
	NULL ,  '".$_SESSION['ses_memberID']."',  '".$_SESSION['ses_memberName']."', '".time()."'
	);";
	mysql_query($q);
	}else{
		mysql_query("DELETE FROM memberonline WHERE unix_timestamp( ) - onlineTimestamp > 60 ");
	}
}
?>

3. แสดงข้อมูลด้วย ajax ใน jQuery ไฟล์ memberonline.php

CSS code

<style type="text/css">
div#memberOnlineShow{
	width:120px;
	border:1px solid #99FFCC;
	color:#3366CC;
	text-align:center;
}
</style>

HTML code

<div id="memberOnlineShow">

</div>

Javascript Code

<script src="http://www.google.com/jsapi" type="text/javascript"></script>  
<script type="text/javascript">  
google.load("jquery", "1.3.2");  
</script>  
<script type="text/javascript">  
$(function(){  
	callMemberOnline();
});  
var intV=setInterval("callMemberOnline()",5000);
function callMemberOnline(){
		var html=$.ajax({
			url:"gmemberonline.php",
			data:"memberID=&memberName=",
			async: false,
			success:function(html){
				$("div#memberOnlineShow").html(html);
			},
			error:function(){
					clearInterval(intV);
			}
		}).responseText;		
}
</script>

รวมไฟล์ memberonline.php (สำหรับทดสอบ)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

</head>

<body>
<style type="text/css">
div#memberOnlineShow{
	width:120px;
	border:1px solid #99FFCC;
	color:#3366CC;
	text-align:center;
}
</style>
<div id="memberOnlineShow">

</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>  
<script type="text/javascript">  
google.load("jquery", "1.3.2");  
</script>  
<script type="text/javascript">  
$(function(){  
	callMemberOnline();
});  
var intV=setInterval("callMemberOnline()",5000);
function callMemberOnline(){
		var html=$.ajax({
			url:"gmemberonline.php",
			data:"memberID=&memberName=",
			async: false,
			success:function(html){
				$("div#memberOnlineShow").html(html);
			},
			error:function(){
					clearInterval(intV);
			}
		}).responseText;		
}
</script> 


</body>
</html>
]]>Wed, 25 Nov 2009 12:54:36 +0700รู้จักกับ Ajax Events ใน jQueryhttp://www.ninenik.com/รู้จักกับ_Ajax_Events_ใน_jQuery-230.html 1. Local Events ใช้กับ ajax object ของ jQuery

ตัวอย่างการใช้งาน Local Events

 $.ajax({
   beforeSend: function(){
     // สำหรับควบคุม beforeSend event
   },
   complete: function(){
     // สำหรับควบคุม complete event
   }
   // ......
 });
2. Global Events ใช้กับ DOM (Document Object Model) element ทั่วไปเช่น div,img,input เป็นต้น

ตัวอย่างการใช้งาน Global Events

$("div#loading").bind("ajaxSend", function(){
   $(this).show();
 }).bind("ajaxComplete", function(){
   $(this).hide();
 });
การปิดการใช้งาน Global Events สามารถกำหนด option ใน ajax object ของ jQuery

ตัวอย่างการปิดการใช่้งาน Global Events

$.ajax({
   url: "test.html",
   global: false,
   // ...
});
รายการ Events ทั้งหมดที่เกิดจากการใช้งาน ajax object ใน jQuery
1.ajaxStart (Global Event)
เป็น event ที่เกิดเมื่อเริ่มมีการร้องขอแบบ Ajax และไม่มีคำร้องขอแบบ Ajax อื่นที่กำลังทำงานอยู่

ตัวอย่างการใช้งาน

// เมื่อมีการส่งคำร้องขอแบบ ajax ให้ div ที่มี id เท่ากับ loading แสดง
 $("div#loading").ajaxStart(function(){
   $(this).show();
 });
2.beforeSend (Local Event)
เป็น event ที่เรียกก่อนที่คำร้องขอแบบ ajax จะเริ่ม ใช้สำหรับกำหนดค่าเพิ่มเติมเกี่ยวกับ ajax เช่น header,content-type เป็นต้น

ตัวอย่างการใช้งาน

 $.ajax({
   beforeSend: function(){
     // สำหรับควบคุม beforeSend event
   }
 });
3.ajaxSend (Global Event)
เป็น event ที่เรียกก่อนที่คำร้องขอแบบ ajax จะทำงาน

ตัวอย่างการใช้งาน

// แสดงข้อความ ก่อนคำร้องขอแบบ ajax จะทำงาน
 $("div#msg").ajaxSend(function(){
   $(this).append("<li>Starting request </li>");
 });
4.success (Local Event)
เป็น event ที่เกิดขึ้นต่อเมื่อมีการส่งคำร้องขอแบบ ajax สำเร็จ ไม่มีข้อผิดพลาดจาก เซิร์ฟเวอร์ ไม่มีข้อผิดพลาดกับข้อมูลที่ส่ง

ตัวอย่างการใช้งาน

 $.ajax({
   success: function(){
     // สำหรับควบคุม success event
   }
 });
5.ajaxSuccess (Global Event)
เป็น event ที่เกิดขึ้นต่อเมื่อมีการส่งคำร้องขอแบบ ajax สำเร็จ คล้ายกับ local success event

ตัวอย่างการใช้งาน

// แสดงข้อความเมื่อทำการส่งคำร้องขอแบบ ajax สำเร็จ
 $("div#msg").ajaxSuccess(function(){
   $(this).append("<li>Successful Request!</li>");
 });
6.error (Local Event)
เป็น event ที่เกิดขึ้นการส่งคำร้องขอแบบ ajax ล้มเหลวหรือเกิดข้อผิดพลาด

ตัวอย่างการใช้งาน

 $.ajax({
   error: function(){
     // สำหรับควบคุม error event
   }
 });
7.ajaxError (Global Event)
เป็น event ที่เกิดขึ้นการส่งคำร้องขอแบบ ajax ล้มเหลวหรือเกิดข้อผิดพลาด คล้ายกับ local error event

ตัวอย่างการใช้งาน

 $("div#msg").ajaxError(function(){
   $(this).append("<li>Error requesting page </li>");
 });
8.complete (Local Event)
เป็น event ที่เกิดขึ้นเมื่อมีการส่งคำร้องขอแบบ ajax ไป โดยไม่จำเป็นที่คำร้องขอแบบ ajax นั้นจะสำเร็จหรือไม่

ตัวอย่างการใช้งาน

 $.ajax({
   complete: function(){
     // สำหรับควบคุม complete event
   }
 });
9.ajaxComplete (Global Event)
เป็น event ที่เกิดขึ้นเมื่อมีการส่งคำร้องขอแบบ ajax ไป โดยไม่จำเป็นที่คำร้องขอแบบ ajax นั้นจะสำเร็จหรือไม่ และ event นี้จะเกิดขึ้นเสมอเมื่อคำร้องขอแบบ ajax จบลง คล้ายกับ local complete event

ตัวอย่างการใช้งาน

$("div#msg").ajaxComplete(function(){
   $(this).append("<li>Request Complete.</li>");
 });
10.ajaxStop (Global Event)
เป็น event ที่เกิดเมื่อ คำร้องขอแบบ ajax จบลง หรือไม่มีคำร้องขอแบบ ajax ใดๆ ที่กำลังดำเนินการอยู่

ตัวอย่างการใช้งาน

// ซ่อน loading div เมื่อคำร้องขอแบบ ajax จบลง
 $("div#loading").ajaxStop(function(){
   $(this).hide();
 });

ถ้าสามารถทำความเข้าใจ event ต่างๆ ได้ดีแล้วจะทำให้สามารถใช้งาน ajax ใน jQuery ได้อย่างมีประสิทธิภาพ
อ่านเพิ่มเดิมภาษาอังกฤษ http://docs.jquery.com/Ajax_Events

]]>Thu, 12 Nov 2009 10:28:42 +0700สร้างฟังก์ชัน autocomplete ให้ใช้งานแบบง่าย ด้วย ajaxhttp://www.ninenik.com/สร้างฟังก์ชัน_autocomplete_ให้ใช้งานแบบง่าย_ด้วย_ajax-209.htmlตัวอย่าง

ไฟล์ที่จำเป็นต้องใช้
1.autocomplete.js
2.autocomplete.css
3.autocomplete.gif
ทำการดาวโหลดโดยคลิกขวาที่ลิ้งไฟล์ด้านบน แล้วทำการบันทึก

HTML Code ตัวอย่าง

<html>
<head>
<title></title>
<script type="text/javascript" src="autocomplete.js"></script>
<link rel="stylesheet" href="autocomplete.css"  type="text/css"/>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <input name="show_arti_topic" type="text" id="show_arti_topic" size="50" />
  <input name="h_arti_id" type="hidden" id="h_arti_id" value="" />
</form>
<script type="text/javascript">
// แทรก javascript
</script>
</body>
</html>

Javascript Code

<script type="text/javascript">
function make_autocom(autoObj,showObj){
	var mkAutoObj=autoObj; 
	var mkSerValObj=showObj; 
	new Autocomplete(mkAutoObj, function() {
		this.setValue = function(id) {		
			document.getElementById(mkSerValObj).value = id;
		}
		if ( this.isModified )
			this.setValue("");
		if ( this.value.length < 1 && this.isNotClick ) 
			return ;	
		return "gdata.php?q=" +encodeURIComponent(this.value);
    });	
}	
 
// การใช้งาน
// make_autocom(" id ของ input ตัวที่ต้องการกำหนด "," id ของ input ตัวที่ต้องการรับค่า");
make_autocom("show_arti_topic","h_arti_id");
</script>

gdata.php Code

<?php
header("Content-type:text/html; charset=UTF-8");        
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);       
// เชื่อมต่อฐานข้อมูล
$link=mysql_connect("localhost","root","123456") or die("error".mysql_error());
mysql_select_db("database_name",$link);
mysql_query("set character set utf8");
 
$q = urldecode($_GET["q"]);
$pagesize = 50; // จำนวนรายการที่ต้องการแสดง
$table_db="article"; // ตารางที่ต้องการค้นหา
$find_field="arti_topic"; // ฟิลที่ต้องการค้นหา
$sql = "select * from $table_db  where locate('$q', $find_field) > 0 order by locate('$q', $find_field), $find_field limit $pagesize";
$results = mysql_query($sql);
while ($row = mysql_fetch_array( $results )) {
	$id = $row["arti_id"]; // ฟิลที่ต้องการส่งค่ากลับ
	$name = ucwords( strtolower( $row["arti_topic"] ) ); // ฟิลที่ต้องการแสดงค่า
	// ป้องกันเครื่องหมาย '
	$name = str_replace("'", "'", $name);
	// กำหนดตัวหนาให้กับคำที่มีการพิมพ์
	$display_name = preg_replace("/(" . $q . ")/i", "<b>$1</b>", $name);
	echo "<li onselect=\"this.setText('$name').setValue('$id');\">$display_name</li>";
}
mysql_close();
?>
]]>Sun, 05 Jul 2009 00:00:00 +0700กำหนดรายการใน listbox ที่ 2 จากเงื่อนไขการเลือก listbox ที่ 1 ด้วย ajax ใน jquery อย่างง่ายhttp://www.ninenik.com/กำหนดรายการใน_listbox_ที่_2_จากเงื่อนไขการเลือก_listbox_ที่_1_ด้วย_ajax_ใน_jquery_อย่างง่าย-207.htmlตัวอย่างต่อไป เป็นตัวอย่างการใช้งานอย่างง่าย สามารถนำไปประยุกต์ใช้ได้อย่างกว้างขวาง เช่น ประยุกต์ใช้สำหรับ การเลือกจังหวัดในรายการ listbox ที่ 1 และให้แสดงอำเภอเฉพาะในจังหวัดที่เลือกใน listbox ที่ 2 หรืออื่นๆ เป็นต้น

ไฟล์ two_listbox.php 

<form id="form1" name="form1" method="post" action="">
  <p>ตัวเลือกที่1
    <select name="list1" id="list1">
      <option value="">เลือกรายการ</option>
      <option value="1">เลือกรายการ 1</option>
      <option value="2">เลือกรายการ 2</option>
      <option value="3">เลือกรายการ 3</option>
      <option value="4">เลือกรายการ 4</option>
      <option value="5">เลือกรายการ 5</option>                
      </select>
    <br />
ตัวเลือกที่2
<select name="list2" id="list2">
  <option value="">เลือกรายการ</option>
</select>
</p>
  <p>
    <input type="submit" name="button" id="button" value="Submit" />
</p>
</form>

Javascript Code แทรกในไฟล์ two_listbox.php 

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
	$("select#list1").change(function(){
		var datalist2 = $.ajax({	// รับค่าจาก ajax เก็บไว้ที่ตัวแปร datalist2
			  url: "data_for_list2.php", // ไฟล์สำหรับการกำหนดเงื่อนไข
			  data:"list1="+$(this).val(), // ส่งตัวแปร GET ชื่อ list1 ให้มีค่าเท่ากับ ค่าของ list1
			  async: false
		}).responseText;		
		$("select#list2").html(datalist2); // นำค่า datalist2 มาแสดงใน listbox ที่ 2 ที่ชื่อ list2
		// ชื่อตัวแปร และ element ต่างๆ สามารถเปลี่ยนไปตามการกำหนด
	});
});
</script>

ไฟล์ data_for_list2.php 

<?php
header("Content-type: application/xhtml+xml; charset=utf-8"); 
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
?>
<?php if(isset($_GET['list1']) && $_GET['list1']!=""){?>
  <option value="">เลือกรายการ</option>
  <?php for($i=1;$i<=$_GET['list1'];$i++){ ?>
  <option value="<?=$i?>">เลือกรายการ <?=$i?></option>
  <?php } ?>
<?php }else{ ?>
  <option value="">เลือกรายการ</option>
<?php } ?>

ไฟล์ data_for_list2.php (กรณีดึงจากฐานข้อมูล)

<?php
header("Content-type: application/xhtml+xml; charset=utf-8"); 
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
// ส่วนติดต่อกับฐานข้อมูล  
mysql_connect("localhost","root","test") or die("Cannot connect the Server");       
mysql_select_db("test") or die("Cannot select database");       
mysql_query("set character set utf8");   
?>
<?php if(isset($_GET['list1']) && $_GET['list1']!=""){?>
  <option value="">เลือกรายการ</option>
  <?php
  $q="SELECT * FROM table WHERE field='".$_GET['list1']."' ";
  $qr=mysql_query($q);
  while($rs=mysql_fetch_array($qr)){
  ?>
  <option value="<?=$rs['column_data_id']?>">เลือกรายการ <?=$rs['culumn_data']?></option>
  <?php } ?>
<?php }else{ ?>
  <option value="">เลือกรายการ</option>
<?php } ?>
]]>Sun, 07 Jun 2009 00:00:00 +0700แสดงป้ายโฆษณา banner แบบสุ่ม random ด้วย ajax อย่างง่ายhttp://www.ninenik.com/แสดงป้ายโฆษณา_banner_แบบสุ่ม_random_ด้วย_ajax_อย่างง่าย-142.html <script language="javascript" src="ajax.js"></script> <script language="javascript"> function doajax(){ var ajax1=createAjax(); ajax1.onreadystatechange=function(){ if(ajax1.readyState==4 && ajax1.status==200){ document.getElementById('myplace').innerHTML=ajax1.responseText; }else{ return false; } } ajax1.open("GET","get_banner.php",true); ajax1.send(null); } window.onload=function(){ setInterval("doajax()",2000); // กำหนดให้สลับแบนเนอร์ทุกๆ 2 วินาที } </script> <div id="myplace"> <img src="images/mybanner_1.jpg" /> </div>

โค้ด get_banner.php

<?php
header("Cache-Control: no-store, no-cache, must-revalidate"); 
header("Cache-Control: post-check=0, pre-check=0", false); 
	$banner_img_arr=array(
		"0"=>"images/mybanner_1.jpg", // key 0 เก็บรูป banner ที่ 1
		"1"=>"images/mybanner_2.jpg", // key 1 เก็บรูป banner ที่ 2
		"2"=>"images/mybanner_3.jpg"	// สามารถเพิ่มจำนวนได้
	);
	$banner_link_arr=array(
		"0"=>"http://www.google.com", // เก็บค่า link เรียงลำดับให้ตรงคู่กับรูปภาพ
		"1"=>"http://www.yahoo.com",
		"2"=>"http://www.hotmail.com"	// สามารถเพิ่มจำนวนได้
	);
	$rand_banner=rand(0,2); // ค่า key 0 ถึง 2
	$banner_img=$banner_img_arr[$rand_banner];
	$banner_link=$banner_link_arr[$rand_banner];
	$html_banner="<a href='".$banner_link."' target='_blank'>";
	$html_banner.="<img src='".$banner_img."' border='0'></a>";
	echo $html_banner; // แสดง แบนเนอร์
?>

ดาวน์โหลด ajax.js คลิกดาวน์โหลด

ดูตัวอย่าง คลิกดูตัวอย่าง

]]>Wed, 05 Nov 2008 01:05:54 +0700