Ajax：后台jquery实现ajax无刷新删除数据及demo

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

　　那么问题来了，局部刷新技术是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>