ajax實(shí)現(xiàn)頁面加載和內(nèi)容刪除
ajax最大的好處就在于加載和刪除的時(shí)候不會(huì)跳轉(zhuǎn)頁面,現(xiàn)在的網(wǎng)頁大多都會(huì)選擇用ajax來寫,相比嵌入PHP代碼來說減少了代碼量,同時(shí)加載頁面也會(huì)比較快,下面是用ajax以數(shù)據(jù)庫fruit表為例寫的加載頁面和水果的刪除,剛開始用ajax可能寫起來還是會(huì)比較手生,就當(dāng)是練習(xí)好了。
這是fruit表:
下面就是首頁的代碼了,先建一個(gè)php文件main.php
<body> <h2>內(nèi)容加載</h2> <table cellpadding="0" cellspacing="0" border="1" width="100%"> <tr> <td>水果名稱</td> <td>水果價(jià)格</td> <td>水果產(chǎn)地</td> <td>操作</td> </tr> <tbody id="tb"> </tbody> </table> </body>
我選擇的是在頁面只顯示fruit表中的水果名稱 價(jià)格和產(chǎn)地這三列,下面我們就要寫加載的處理頁面了,建一個(gè)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)."|"; //每一行之間用“|”連接,這樣最后就會(huì)多出一個(gè)“|” } $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的時(shí)候要特別注意里面的分號(hào)和逗號(hào),我自己總是把逗號(hào)寫成分號(hào),結(jié)果無法輸出,在檢查一遍代碼無誤后,才發(fā)現(xiàn)是逗號(hào)寫錯(cuò)了,這是件非常令人頭疼的事情。
寫完加載頁面之后我們要開始寫刪除頁面了,建一個(gè)php文件shanchu.php,刪除頁面是非常簡(jiǎn)單的,和之前直接嵌入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"; }
接下來在我要重新寫一個(gè)ajax的時(shí)候會(huì)發(fā)現(xiàn),寫完之后不運(yùn)行,因?yàn)樵诩虞d頁面的時(shí)候刪除里面的 class不識(shí)別,這就需要我把刪除放到加載的ajax里面了,同時(shí)把加載封裝成一個(gè)方法,刪除的時(shí)候調(diào)用一下就可以。
<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>
這樣寫起來就沒有問題了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Ajax添加數(shù)據(jù)與刪除篇實(shí)現(xiàn)代碼
- jQuery之a(chǎn)jax刪除詳解
- jquery ajax實(shí)現(xiàn)批量刪除具體思路及代碼
- PHP+ajax 無刷新刪除數(shù)據(jù)
- Ajax方式刪除表格一行數(shù)據(jù)示例代碼
- 使用ajax加載的頁面中包含的javascript的解決方法
- 滑輪滾動(dòng)到頁面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討
- Ajax實(shí)現(xiàn)靜態(tài)刷新頁面過程帶加載旋轉(zhuǎn)圖片
- jQuery Ajax頁面局部加載方法匯總
- 基于jquery的finkyUI插件與Ajax實(shí)現(xiàn)頁面數(shù)據(jù)加載功能
相關(guān)文章
空格或者空白字符導(dǎo)致$.ajax()報(bào)parseerror錯(cuò)誤小結(jié)
這篇文章主要介紹了空格或者空白字符導(dǎo)致$.ajax()報(bào)parseerror錯(cuò)誤,需要的朋友可以參考下2014-04-04AJAX應(yīng)用實(shí)例之檢測(cè)用戶名是否唯一(實(shí)例代碼)
本文通過實(shí)例代碼給大家介紹了AJAX應(yīng)用實(shí)例之檢測(cè)用戶名是否唯一,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-09-09非常簡(jiǎn)單的Ajax請(qǐng)求實(shí)例附源碼
這篇文章為大家推薦了一個(gè)非常簡(jiǎn)單的Ajax請(qǐng)求實(shí)例,可以在不重載頁面的情況與 Web 服務(wù)器交換數(shù)據(jù),感興趣的小伙伴們可以參考一下2015-11-11ajax請(qǐng)求后臺(tái)得到j(luò)son數(shù)據(jù)后動(dòng)態(tài)生成樹形下拉框的方法
今天小編就為大家分享一篇ajax請(qǐng)求后臺(tái)得到j(luò)son數(shù)據(jù)后動(dòng)態(tài)生成樹形下拉框的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08MVC中基于Ajax和HTML5實(shí)現(xiàn)文件上傳功能
這篇文章主要介紹了MVC中基于Ajax和HTML5實(shí)現(xiàn)文件上傳功能的相關(guān)資料,需要的朋友可以參考下2015-10-10