一：以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>