上图是后台管理的新闻展示页面，现在删除数据的时候会整个页面刷新一遍，感觉很不友好，理想状态是点击右侧的删除，局部刷新删除这条数据即可。网上这方面的资料还是不多，所以写一篇总结。

那么问题来了，局部刷新技术是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";
<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
<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();
  {// 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>
<h2>My Book Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">获得我的图书收藏列表</button>
</body>
</html>