上圖是后台管理的新聞展示頁面，現在刪除數據的時候會整個頁面刷新一遍，感覺很不友好，理想狀態是點擊右側的刪除，局部刷新刪除這條數據即可。網上這方面的資料還是不多，所以寫一篇總結。
那么問題來了，局部刷新技術是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>