您好,登錄后才能下訂單哦!
這篇文章主要介紹了ajax怎么實(shí)現(xiàn)數(shù)據(jù)刪除、查看詳情功能,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
運(yùn)用bootstrap,jquery和ajax顯示一些數(shù)據(jù),附加刪除功能并且點(diǎn)擊能彈出模態(tài)框詳情功能
主頁面main.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標(biāo)題文檔</title> <link type="text/css" href="../FENGZHUANG/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" /> //引入bootstrap的css文件 <script src="../FENGZHUANG/jquery-3.1.1.min.js"></script> //先引入jquery的js文件 <script src="../FENGZHUANG/bootstrap/js/bootstrap.min.js"></script> //再引入其它的js文件 <style type="text/css"> .xq{ margin-left:30px} </style> </head> <body> <div class="page-header"> <h2>顯示數(shù)據(jù) </h2> </div> <table class="table table-hover"> <thead> <tr> <th width="30%">代號(hào)</th> <th width="30%">名稱</th> <th width="40%">操作</th> </tr> </thead> <tbody id="tb"> //用js向其中添加內(nèi)容 </tbody> </table> <!-- 模態(tài)框(Modal) --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h5 class="modal-title" id="myModalLabel">詳細(xì)信息</h5> </div> <div class="modal-body" id="nr"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> </body> <script type="text/javascript"> //加載數(shù)據(jù) Load(); //加載數(shù)據(jù)的方法 function Load() { $.ajax({ url:"jiazai.php", dataType:"TEXT", success: function(data){ var str = ""; var hang = data.split("|"); //根據(jù)字符串中的|分解 for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); //根據(jù)字符串中的^分解 str = str+"<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td><button type='button' class='btn btn-info btn-sm sc' code='"+lie[0]+"'>刪除</button><button type='button' class='btn btn-primary btn-sm xq' code='"+lie[0]+"'>查看</button></td></tr>"; } $("#tb").html(str); //向tbody中輸出內(nèi)容 addshanchu(); addxiangqing(); } }); } //給刪除按鈕加事件的方法 function addshanchu() { //刪除事件 $(".sc").click(function(){ var code = $(this).attr("code"); //獲取刪除按鈕所在的數(shù)據(jù)的code $.ajax({ url:"shanchu.php", data:{code:code}, dataType:"TEXT", type:"POST", success: function(d){ if(d.trim()=="OK") { alert("刪除成功"); Load(); //刪除完需要加載數(shù)據(jù) } else { alert("刪除失敗"); } } }); }) } //給查看詳情加事件的方法 function addxiangqing() { $(".xq").click(function(){ //顯示模態(tài)框 $('#myModal').modal('show'); //在模態(tài)框里面顯示內(nèi)容 var code = $(this).attr("code"); //獲取哪一條數(shù)據(jù) $.ajax({ url:"xiangqing.php", data:{code:code}, dataType:"TEXT", type:"POST", success:function(data){ var lie = data.split("^"); var str = "<div>民族代號(hào):"+lie[0]+"</div><div>民族名稱:"+lie[1]+"</div>"; $("#nr").html(str); } }); }) } </script> </html>
加載數(shù)據(jù)的頁面jiazai.php
<?php include("../FENGZHUANG/DBDA.class.php"); $db = new DBDA(); $sql = "select * from nation order by code ASC"; $arr = $db->Query($sql); // 下面實(shí)現(xiàn)的字符串是類似這樣的n001^漢族|n002^回族|n003^苗族 $str = "";返回主頁面的數(shù)據(jù)是TEXT型,得轉(zhuǎn)換一下 foreach($arr as $v) { $str = $str.implode("^",$v)."|"; //拼接字符串 } $str = substr($str,0,strlen($str)-1); //去掉末尾的|字符。 echo $str;
刪除處理頁面shanchu.php
<?php include("../FENGZHUANG/DBDA.class.php"); $db = new DBDA(); $code = $_POST["code"]; $sql = "delete from nation where code='{$code}'"; if($db->Query($sql,0)) { echo "OK"; } else { echo "NO"; }
查看詳情頁面xiangqing.php
<?php $code = $_POST["code"]; include("../fengzhuang/DBDA.class.php"); $db = new DBDA(); $sql = "select * from nation where code='{$code}'"; echo $db->StrQuery($sql);
ajax是一種在無需重新加載整個(gè)網(wǎng)頁的情況下,能夠更新部分網(wǎng)頁的技術(shù),可以通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,使網(wǎng)頁實(shí)現(xiàn)異步更新。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“ajax怎么實(shí)現(xiàn)數(shù)據(jù)刪除、查看詳情功能”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。