上图是后台管理的新闻展示页面，现在删除数据的时候会整个页面刷新一遍，感觉很不友好，理想状态是点击右侧的删除，局部刷新删除这条数据即可。网上这方面的资料还是不多，所以写一篇总结。
那么问题来了，局部刷新技术是ajax，用jquery实现ajax更加方便有效，所以先决定使用jquery+ajax完成（最后会介绍一下js的ajax原理）。
1）修改删除功能的a链接，修改为<a class='del {$row['id']}' num='{$row['id']}' href='javascript:'>删除</a>，代码如下
php页面如下
<?php
foreach($pdo->query($sqlNews) as $row){
echo "<tr id='tr{$row['id']}'>";
echo "<td>{$row['id']}</td>";
echo "<td>{$row['title']}</td>";
echo "<td>{$row['abstract']}</td>";
echo "<td>{$row['level1']}</td>";
echo "<td>{$row['level2']}</td>";
echo "<td>{$row['level3']}</td>";
if($row['shelf']){
echo "<td>上墙</td>";
}else{
echo "<td>下墙</td>";
}
echo "<td>".date('Y-m-d',$row['regtime'])."</td>";
echo "<td><a href='edit.php?id={$row['id']}'>修改</a></td>";
// echo "<td><a href='delete.php?id={$row['id']}&image={$row['imgsrc']}'>删除</a></td>";
echo "<td><a class='del {$row['id']}' num='{$row['id']}' href='javascript:'>删除</a></td>";
echo "</tr>";
}
2)Jquery点击事件响应删除的a链接，具体代码如下
jquery代码如下：
<script type="text/javascript"> $(function(){ //按钮单击时执行 $(".del").click(function(){ num =$(this).attr('num'); htmlobj=$.ajax({url:"delete.php?id="+num,async:false}); if (htmlobj.responseText=="success") { $("#tr"+num).hide(); } }); }); </script>
3）后台响应的代码如下
<?php $id=$_GET['id']; $sqlNews="delete from news where id={$id}"; if($pdo->exec($sqlNews)){ echo "success"; }else{ echo "failed"; } ?>
下面单独介绍一下jquery+ajax 和 js+ajax的小demo
1）jquery+ajax 的小demo
<!DOCTYPE html> <html> <head> <meta charset='utf8'> <script src="jquery.min.js" /> <script> $(document).ready(function(){ }) </script> </head> <body> <h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3> <button id="btn1" type="button">获得外部的内容</button> </body> <script type="text/javascript"> $(function(){ //按钮单击时执行 $("#btn1").click(function(){ //取Ajax返回结果 //为了简单，这里简单地从文件中读取内容作为返回数据 htmlobj=$.ajax({url:"a.txt",async:false}); //显示Ajax返回结果 $("#test").html(htmlobj.responseText); }); }); </script> </html>
2）js+ajax的小demo
<html> <head> <meta charset = 'utf-8'> <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; var txt,x,i; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("title"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; } document.getElementById("myDiv").innerHTML=txt; } } xmlhttp.open("GET","books.xml",true); xmlhttp.send(); } </script> </head> <body> <h2>My Book Collection:</h2> <div id="myDiv"></div> <button type="button" onclick="loadXMLDoc()">获得我的图书收藏列表</button> </body> </html>