一：以Ajax的方式顯示數據
我們都知道，如果用Ajax程序去加載一個動態頁，則加載的實際上是這個動態頁執行完畢后生成的靜態HTML代碼字符串。
1.以原有的格式顯示數據
<?php header("Content-type: text/html; charset=gb2312"); include('conn.php'); $result=$conn->query("Select * From lyb limit 4 "); while($row=$result->fetch_assoc()){ echo "<tr><td>".$row['title']."</td>"; echo "<td>".$row['content']."</td>"; echo " <td>".$row['author']."</td>"; echo " <td>".$row['email']."</td>"; echo "<td>".$row['ip']."</td></tr>"; } ?>
<html>
<head>
<title>以Ajax方式顯示數據</title>
<script src="jquery.min.js"></script>
<script>
$(function(){ //頁面載入時執行
$.post("10-1.php", function(data){
$("#disp").append(data);
// alert(data); //僅作測試，看服務器端數據是否已傳來
});
} )
</script>
</head>
<body>
<h2 align="center">以Ajax方式顯示數據</h2>
<table border="1" width="100%"><tbody id="disp"><tr bgcolor="#e0e0e0">
<th>標題</th> <th>內容</th> <th>作者</th>
<th>email</th> <th>來自</th>
</tr></tbody></table>
</body>
</html>
2.以自定義的格式顯示數據。
2.1返回JSON格式的字符串，將JSON數據以需要的格式顯示。
<? header("Content-type: text/html; charset=gb2312"); include('conn.php'); $result=$conn->query("Select * From lyb limit 4 "); echo '['; $i=0; while($row=$result->fetch_assoc()){
?> {title:"<?= $row['title'] ?>", content:"<?= $row['content'] ?>", author:"<?= $row['author'] ?>", email:"<?= $row['email'] ?>", ip:"<?= $row['ip'] ?>"} <? if($result->num_rows!=++$i) echo ','; //如果不是最后一條記錄 } echo ']' ?>
2.2按指定的特殊字符串格式輸出一條記錄，將返回的數組轉換成字符串 implode（'|',$row）;然后使用split（'|'）分割該字符串得到一個數組。
<? header("Content-type: text/html; charset=gb2312"); include('conn.php'); $result=$conn->query("Select * From lyb limit 4 "); $row=$result->fetch_assoc(); $str=implode('|',$row);//將數組各元素用“|”連接起來 echo $str; //輸出用“|”分隔的特殊字符串
?>
<html>
<head>
<title>分割一條記錄中的數據</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(function(){ //頁面載入時執行
$.get("10-3.php", function(data) {
str=data.split("|");
var tr = "<tr><td>" + str[1]+ "</td><td>" + str[2]+ "</td><td>" + str[3] + "</td><td style='color:red'>" + str[4] + "</td><td>" + str[5] + "</td></tr>";
$("#disp").append(tr);
});
})
</script>
</head>
<body>
<h3 align="center" style="margin:4px">分割顯示一條記錄中的數據</h3>
<table border="1" width="95%" id="disp"><!--載入10-1.asp的容器元素-->
<tr bgcolor="#e0e0e0">
<th>標題</th> <th width="100">內容</th> <th width="60">作者</th>
<th>email</th> <th width="80">來自</th>
</tr>
</table>
</body>
</html>
二、以Ajax方式查詢數據
1、無刷新查詢數據的實現
HTML代碼如下：
<form action="#" method="get"> <div style="border:1px solid gray; background:#eee;padding:4px;"> 查找信息：請輸入關鍵字 <input name="keyword" id="keyword" type="text"> <select name="sel" id="sel"> <option value="sceNo">景點編號</option> <option value="sceName">景點名稱</option> <option value="sPrice">景點價格</option> <option value="author">發布人員</option> </select> <input type="button" id="Submit" value="查詢"> <a href="index1.php">添加記錄</a> <a href="show_scenery.php">返回</a> </div> </form> <div id="disp"></div> <script type="text/javascript"> $(function(){ $("#Submit").click(function(){ var keyword = $("#keyword").val();//得到下拉菜單中的選中項的value值 var sel = $("#sel").val(); alert(keyword); if (keyword != 0) { $.get("search_scenery.php",{keyword:keyword,sel:sel,sid:Math.random()},function(data){ $("#disp").html(data); }); } else{$("#disp").html("搜索內容不能為空")}; }); }); </script>
php文件：
$result = mysql_query("select * from `scenery`",$conn); $keyword =(trim($_GET['keyword'])); $sel=($_GET['sel']);//獲取選擇的查詢類型 /*$keyword=trim($_GET['keyword']);//獲取輸入的關鍵字 $sel=$_GET['sel'];//獲取選擇的查詢類型*/ $sql="select * from `scenery`"; if ($keyword<>"") { $sql=$sql ." where $sel like '%$keyword%'"; //構造查詢語句 } $result=mysql_query($sql) or die('執行失敗'); if (mysql_num_rows($result)>0) { echo "<p>關鍵字為“ $keyword ”，共找到".mysql_num_rows($result)." 條記錄</p>"; echo "<a href='show_scenery.php'>返回</a>"; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>查詢結果</title> </head> <body> <form action="?del=1" method="post"> <table border="1"> <tr bgcolor="#ccc" > <th>景點編號</th> <th>景點名稱</th> <th>景點描述</th> <th>景點價格</th> <th>發布人員</th> <th>發布時間</th> <th>刪除</th> <th>更新</th> </tr> <?php while ($row = mysql_fetch_assoc($result)) { ?> <tr> <td><?= $row['sceNo']?></td> <td><?= $row['sceName']?></td> <td><?= $row['sceDesc']?></td> <td><?= $row['sPrice']?>元/人</td> <td><?= $row['author']?></td> <td><?= $row['createtime']?></td> <td><input type="checkbox" name="selected[]" id="" value="<?= $row['sceNo']?>"></td><!-- 刪除的復選框 --> <td><a href="edit_scenery.php?sceNo=<?= $row['sceNo']?>">更新</a></td> </tr> <?php } }else echo "<script>alert('沒有搜索到任何記錄!');location.href='show_scenery.php'</script>"; ?> <tr bgcolor="#ddd"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td><input type="submit" value="刪 除"></td><!-- 刪除按鈕 --> <td></td> </tr> </table> </form> <p>共有<?= mysql_num_rows($result) ?>條記錄 </p>