ประยุกต์ ใช้งาน php และ ajax ใน jQuery แสดงผลลัพธ์ คล้าย twitter
04 May 2010ตัวอย่าง
ประยุกต์ ใช้งาน 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>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
02 Mar 10 ประยุกต์ แปลเนื้อหา ในเว็บไซต์ด้วย google translater api สำหรับ php อ่าน 1161 24 Feb 09 การใช้งาน CSS สำหรับกำหนดตำแหน่งตรึงไว้ชิดขอบล่าง อ่าน 4044 15 Sep 10 สร้าง ตัว marker ระบุตำแหน่ง ใน google map จำนวนมาก จาก xml ไฟล์ อ่าน 3723 04 Oct 08 ดาวน์โหลด MySQL อ่าน 2581 18 Mar 09 สร้างเครื่องคิดเลขอย่างง่ายด้วย CSS และ jQuery อ่าน 2081 06 Nov 09 สร้าง swap แบนเนอร์ effect แบบ fade ด้วย jQuery อย่างง่าย อ่าน 4672 22 Oct 10 สร้าง php ฟังก์ชัน ค้นหาค่าในตัวแปร array อย่างง่าย อ่าน 1428 17 Nov 08 ตรวจสอบฟอร์ม form ก่อน submit ด้วย jquery อ่าน 9331 13 Feb 09 แปลงข้อความเป็นตัวเล็ก toLowerCase ตัวใหญ่ toUpperCase ด้วย javascript อ่าน 1895 25 Sep 08 Javascript กับเทคนิค Mouseover และ Mouseout อ่าน 4832 30 Mar 09 ค้นหาและ hilight ข้อความในหน้าเว็บเพจด้วย jQuery อ่าน 2781 25 Sep 08 แสดง Code สวยๆ Style Google ด้วยเครื่องมือที่เรียกว่า SyntaxHighlighter อ่าน 5453 17 Sep 10 กำหนด infowindow ให้กับตัว marker จำนวนมาก ใน google map อ่าน 2930 25 Sep 08 ความรู้เกี่ยวกับ CSS เบื้องต้น อ่าน 4142 22 Sep 11 แนวทาง การเลื่อนแล้ว fixed ตำแหน่งเนื้อหาที่ต้องการ ด้วย jQuery อ่าน 1105 29 Mar 09 ประยุกต์ฟังก์ชัน substr_replace ใน PHP ตัดข้อความยาวแล้วตามด้วยเครื่องหมาย ...... อ่าน 1695 04 May 10 ประยุกต์ ใช้งาน php และ ajax ใน jQuery แสดงผลลัพธ์ คล้าย twitter อ่าน 3194 09 Nov 11 แนวทางการสร้างเมนูหลายภาษา อย่างง่ายด้วย php และ javascript อ่าน 1041 21 Apr 10 สร้างเส้นทาง เพื่อ หาระยะทาง ใน google map ด้วย jQuery อ่าน 7434 30 Oct 08 ฟังก์ชันตรวจสอบอีเมลล์ ด้วย php ละเอียดมากขึ้น php check verify email อ่าน 4400