當我們開發Web程序員時，我們經常需要查看Ajax的詳細信息和返回信息等等，本文是錯新技術頻道小編和大家分享的ajax之數據刪除、查看詳情功能的操作步驟，希望對你有幫助！
運用bootstrap,jquery和ajax顯示一些數據，附加刪除功能并且點擊能彈出模態框詳情功能
主頁面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>無標題文檔</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"> <h1>顯示數據 </h1></div><table class="table table-hover"> <thead> <tr> <th width="30%">代號</th> <th width="30%">名稱</th> <th width="40%">操作</th> </tr> </thead> <tbody id="tb"> //用js向其中添加內容 </tbody></table><!-- 模態框（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> <h4 class="modal-title" id="myModalLabel">詳細信息</h4> </div> <div class="modal-body" id="nr"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div></body><script type="text/javascript">//加載數據Load();//加載數據的方法function Load(){$.ajax({ url:"jiazai.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[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中輸出內容 addshanchu(); addxiangqing(); } });}//給刪除按鈕加事件的方法function addshanchu(){//刪除事件 $(".sc").click(function(){ var code = $(this).attr("code"); //獲取刪除按鈕所在的數據的code $.ajax({ url:"shanchu.php", data:{code:code}, dataType:"TEXT", type:"POST", success: function(d){ if(d.trim()=="OK") { alert("刪除成功"); Load(); //刪除完需要加載數據 } else { alert("刪除失敗"); } } }); })}//給查看詳情加事件的方法function addxiangqing(){ $(".xq").click(function(){ //顯示模態框 $('#myModal').modal('show'); //在模態框里面顯示內容 var code = $(this).attr("code"); //獲取哪一條數據 $.ajax({ url:"xiangqing.php", data:{code:code}, dataType:"TEXT", type:"POST", success:function(data){ var lie = data.split("^"); var str = "<div>民族代號："+lie[0]+"</div><div>民族名稱："+lie[1]+"</div>"; $("#nr").html(str); } }); })}</script></html>加載數據的頁面jiazai.php
<?phpinclude("../FENGZHUANG/DBDA.class.php");$db = new DBDA();$sql = "select * from nation order by code ASC";$arr = $db->Query($sql);// 下面實現的字符串是類似這樣的n001^漢族|n002^回族|n003^苗族$str = "";返回主頁面的數據是TEXT型，得轉換一下foreach($arr as $v){ $str = $str.implode("^",$v)."|"; //拼接字符串}$str = substr($str,0,strlen($str)-1); //去掉末尾的|字符。echo $str;刪除處理頁面shanchu.php
<?phpinclude("../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之數據刪除、查看詳情功能的操作步驟，我們需要不斷的充實自己，更多相關信息，敬請關注我們的錯新技術頻道！
新聞熱點
疑難解答
圖片精選
