ตัวอย่าง
ประยุกต์ ใช้งาน 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="https://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>
