ajax最大的好處就在於載入和刪除的時候不會跳頁,現在的網頁大多都會選擇用ajax來寫,相較於嵌入PHP程式碼來說減少了程式碼量,同時載入頁面也會比較快,
# 下面是用ajax以資料庫fruit表為例寫的載入頁面和水果的刪除,剛開始用ajax可能寫起來還是會比較手生,就當是練習好了
這是fruit表
下面就是首頁的程式碼了,先建一個php檔案main.php
<body> <h2>内容加载</h2> <table cellpadding="0" cellspacing="0" border="1" width="100%"> <tr> <td>水果名称</td> <td>水果价格</td> <td>水果产地</td> <td>操作</td> </tr> <tbody id="tb"> </tbody> </table> </body>
我選擇的是在頁面只顯示fruit表中的水果名稱價格和產地這三列,下面我們就要寫加載的處理頁面了,建一個php文件,jiazaiym.php
<?php include("DADB.class.php"); $db=new DADB(); $sql="select * from fruit "; $arr=$db->Query($sql); $str=""; foreach($arr as $v) { $str=$str.implode("^",$v)."|"; //每一行之间用“|”连接,这样最后就会多出一个“|” } $str=substr($str,0,strlen($str)-1); //把最后多出的“|”用截取字符串的方式删去 echo $str; ?>
載入頁面程式碼寫完之後就可以正式的寫ajax了,這些是要寫在main.php中的
<script type="text/javascript"> $.ajax({ url:"jiazaiym.php", dataType:"TEXT", success:function(data){ var str = ""; var hang = data.split("|"); for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); 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>" } $("#tb").html(str); } }) </script>
注意:在寫ajax的時候要特別注意裡面的分號和逗號,我自己總是把逗號寫成分號,結果無法輸出,在檢查一遍代碼無誤後,才發現是逗號寫錯了,這是件非常令人頭疼的事情
寫完加載頁面之後我們要開始寫刪除頁面了 建一個php檔shanchu.php,刪除頁面是非常簡單的和之前直接嵌入php 是差不多的
<?php $ids=$_POST["ids"]; include("DADB.class.php"); $db=new DADB(); $sql="delete from fruit where ids={$ids}"; if($db->Query($sql,0)) { echo"OK"; } else{ echo"flase"; }
接下來在我要重新寫一個ajax的時候會發現,寫完之後不運行,因為在加載頁面的時候刪除裡面的class不識別,這就需要我把刪除放到加載的ajax裡面了同時把加載封裝成一個方法,刪除的時候調用一下就可以
<script type="text/javascript"> Load(); function Load() { $.ajax({ url: "jiazaiym.php", dataType: "TEXT", success: function (data) { var str = ""; var hang = data.split("|"); for (var i = 0; i < hang.length; i++) { var lie = hang[i].split("^"); 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>" } $("#tb").html(str); //删除页面 $(".sc").click(function(){ var ids=$(this).attr("ids"); $.ajax({ url: "shanchu.php", data: {ids: ids}, type: "POST", dataType: "TEXT", success: function (aa) { //去空格 if (aa.trim() == "OK") { alert("删除成功"); Load(); } else { alert("删除失败"); } } }) }) } }) } </script>
這樣寫起來就沒問題了。
#
##
#
以上是使用ajax 實現頁面載入與內容的刪除的詳細內容。更多資訊請關注PHP中文網其他相關文章!