ajax實現加載頁面、刪除、查看詳細信息 bootstrap美化頁面!

2019-11-19 17:09:51

字體：大中小

來源：轉載

供稿：網友

由于有些的程序員可能不是很會Photoshop，所以為了美化頁面，我們可以借助工具bootstrap，實現起來相對就要比之前做的美觀一些，

今天我用bootstrap把之前做的顯示表格進行了一下美化，同時也把ajax部分進行了優化，看起來會更清晰

我沒有下載bootstrap的包，直接從網頁引用的

<script src="jquery-3.1.1.min.js"></script><link rel="stylesheet" ><script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

注意：如果要引用其中一個包含jquery的多個JS文件，那么jquery文件一定要放在第一位

下面是我在首頁把顯示的表格進行了美化，用了條紋表格，相對來說更美觀了

 <h2>內容加載</h2> <table class="table table-striped"> <!--從bootstrap中引用了里面的class-->  <thead>  <tr>   <th>水果名稱</th>   <th>水果價格</th>   <th>水果產地</th>   <th>操作</th>  </tr>  </thead>  <tbody id="tb">  </tbody> </table>

昨天寫的ajax 部分也進行了優化，以防太多的括號之類的出現問題導致程序不運行,昨天的jiazaiym.php,shanchu.php已經寫過了，今天再補上查看頁面xiangqing.php

<?phpheader("Content-type:text/html;charset=utf-8");$ids=$_POST["ids"];include("DADB.class.php");$db=new DADB();$sql="select * from fruit where ids='{$ids}' ";$arr=$db->Query($sql,1);$str="";foreach($arr as $v){ $str=$str.implode("^",$v)."|"; //每一行之間用“|”連接，這樣最后就會多出一個“|”}$str=substr($str,0,strlen($str)-1); //把最后多出的“|”用截取字符串的方式刪去echo $str;?>

ajax部分代碼如下：

<script type="text/javascript"> Load(); function Load() {  $.ajax({   url: "jiazaiym.php",   dataType: "TEXT",   success: function (data) {    //alert(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> <button type='button' ids='"+lie[0]+"' class='btn btn-primary sc'>刪除</button><button type='button' ids='"+lie[0]+"' class='btn btn-primary ck' data-toggle='modal' data-target='#myModal'>查看</button></td></tr>" //用bootstrp寫刪除和查看的按鈕    }     $("#tb").html(str);     addshanchu();     chakan();    }  }) } //刪除頁面的方法 function addshanchu(){ $(".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("刪除失敗");    }   }  }) }) } //查看的方法： function chakan() {  $(".ck").click(function(){   //顯示模態框//   $('#myModal').modal('show');   //往模態框里面加內容   var ids =$(this).attr("ids");   $.ajax({    url:"xiangqing.php",    data:{ids:ids},    type:"POST",    dataType:"TEXT",    success:function(chakan)    {     var lie=chakan.split("^");     var aa="<div>水果名稱:"+lie[1]+"</div><div>水果價格："+lie[2]+"</div><div>水果產地："+lie[3]+"</div>";     $("#nr").html(aa);    }   })  }) }

模態框的html代碼如下所示，點擊查看會蹦出模態框：

<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>

寫完后頁面如下所示：