ajax最大的好處就在於加載和刪除的時候不會跳轉頁面，現在的網頁大多都會選擇用ajax來寫，相比嵌入PHP代碼來說減少了代碼量，同時加載頁面也會比較快，
下面是用ajax以數據庫fruit表為例寫的加載頁面和水果的刪除，剛開始用ajax可能寫起來還是會比較手生，就當是練習好了
這是fruit表
下面就是首頁的代碼了，先建一個php文件 main.php
1 <body> 2 3 <h2>內容加載</h2> 4 <table cellpadding="0" cellspacing="0" border="1" width="100%"> 5 <tr> 6 <td>水果名稱</td> 7 <td>水果價格</td> 8 <td>水果產地</td> 9 <td>操作</td> 10 </tr> 11 <tbody id="tb"> 12 13 </tbody> 14 </table> 15 </body>
我選擇的是在頁面只顯示fruit表中的水果名稱 價格和產地這三列，下面我們就要寫加載的處理頁面了，建一個php文件，jiazaiym.php
1 <?php 2 include("DADB.class.php"); 3 $db=new DADB(); 4 $sql="select * from fruit "; 5 $arr=$db->Query($sql); 6 $str=""; 7 foreach($arr as $v) 8 { 9 $str=$str.implode("^",$v)."|"; //每一行之間用“|”連接，這樣最后就會多出一個“|” 10 } 11 $str=substr($str,0,strlen($str)-1); //把最后多出的“|”用截取字符串的方式刪去 12 echo $str; 13 ?>
加載頁面代碼寫完之后就可以正式的寫ajax了,這些是要寫在main.php中的
1 <script type="text/javascript"> 2 $.ajax({ 3 url:"jiazaiym.php", 4 dataType:"TEXT", 5 success:function(data){ 6 var str = ""; 7 var hang = data.split("|"); 8 9 for(var i=0;i<hang.length;i++) 10 { 11 var lie = hang[i].split("^"); 12 str = str+"<tr><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td><input type='button' ids='"+lie[0]+"' class='sc' value='刪除'/></td></tr>" 13 14 } 15 $("#tb").html(str); 16 } 17 }) 18 </script>
注意：在寫ajax的時候要特別注意里面的分號和逗號，我自己總是把逗號寫成分號，結果無法輸出，在檢查一遍代碼無誤后，才發現是逗號寫錯了，這是件非常令人頭疼的事情
寫完加載頁面之后我們要開始寫刪除頁面了 建一個php文件 shanchu.php，刪除頁面是非常簡單的 和之前直接嵌入php 是差不多的
1 <?php 2 $ids=$_POST["ids"]; 3 include("DADB.class.php"); 4 $db=new DADB(); 5 $sql="delete from fruit where ids={$ids}"; 6 if($db->Query($sql,0)) 7 { 8 echo"OK"; 9 } 10 else{ 11 echo"flase"; 12 }
接下來在我要重新寫一個ajax的時候會發現，寫完之后不運行，因為在加載頁面的時候刪除里面的 class不識別，這就需要我把刪除放到加載的ajax里面了 同時把加載封裝成一個方法，刪除的時候調用一下就可以
1 <script type="text/javascript"> 2 Load(); 3 function Load() { 4 $.ajax({ 5 url: "jiazaiym.php", 6 dataType: "TEXT", 7 success: function (data) { 8 var str = ""; 9 var hang = data.split("|"); 10 11 for (var i = 0; i < hang.length; i++) { 12 var lie = hang[i].split("^"); 13 str = str + "<tr><td>" + lie[1] + "</td><td>" + lie[2] + "</td><td>" + lie[3] + "</td><td><input type='button' ids='" + lie[0] + "' class='sc' value='刪除'/></td></tr>" 14 15 } 16 $("#tb").html(str); 17 //刪除頁面 18 $(".sc").click(function(){ 19 var ids=$(this).attr("ids"); 20 $.ajax({ 21 url: "shanchu.php", 22 data: {ids: ids}, 23 type: "POST", 24 dataType: "TEXT", 25 success: function (aa) { //去空格 26 if (aa.trim() == "OK") { 27 alert("刪除成功"); 28 Load(); 29 } 30 else { 31 alert("刪除失敗"); 32 } 33 } 34 }) 35 }) 36 } 37 }) 38 } 39 </script>
這樣寫起來就沒有問題了。