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

04 May 2010 เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee

ajax jquery php twitter

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ajax jquery php twitter

ดูแล้ว 15,014 ครั้ง

คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน หรือไม่สามารถใช้งานได้แล้ว

ตัวอย่าง

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

Code ตัวอย่าง

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<?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>