ajax實(shí)現(xiàn)加載頁(yè)面、刪除、查看詳細(xì)信息 bootstrap美化頁(yè)面!

更新時(shí)間：2017年03月14日 09:01:23 作者：霸道小豆丁

這篇文章主要為大家詳細(xì)介紹了ajax實(shí)現(xiàn)加載頁(yè)面、刪除、查看詳細(xì)信息，利用bootstrap美化頁(yè)面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

由于有些的程序員可能不是很會(huì)Photoshop，所以為了美化頁(yè)面，我們可以借助工具bootstrap，實(shí)現(xiàn)起來(lái)相對(duì)就要比之前做的美觀一些，

今天我用bootstrap把之前做的顯示表格進(jìn)行了一下美化，同時(shí)也把a(bǔ)jax部分進(jìn)行了優(yōu)化，看起來(lái)會(huì)更清晰

我沒(méi)有下載bootstrap的包，直接從網(wǎng)頁(yè)引用的

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

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

下面是我在首頁(yè)把顯示的表格進(jìn)行了美化，用了條紋表格，相對(duì)來(lái)說(shuō)更美觀了

 <h2>內(nèi)容加載</h2>

 <table class="table table-striped"> <!--從bootstrap中引用了里面的class-->
  <thead>
  <tr>
   <th>水果名稱(chēng)</th>
   <th>水果價(jià)格</th>
   <th>水果產(chǎn)地</th>
   <th>操作</th>
  </tr>
  </thead>

  <tbody id="tb">

  </tbody>
 </table>

昨天寫(xiě)的ajax 部分也進(jìn)行了優(yōu)化，以防太多的括號(hào)之類(lèi)的出現(xiàn)問(wèn)題導(dǎo)致程序不運(yùn)行,昨天的jiazaiym.php,shanchu.php已經(jīng)寫(xiě)過(guò)了，今天再補(bǔ)上查看頁(yè)面xiangqing.php

<?php
header("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)."|"; //每一行之間用“|”連接，這樣最后就會(huì)多出一個(gè)“|”
}
$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寫(xiě)刪除和查看的按鈕

    }
     $("#tb").html(str);

     addshanchu();
     chakan();
    }

  })
 }

 //刪除頁(yè)面的方法
 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(){
   //顯示模態(tài)框
//   $('#myModal').modal('show');

   //往模態(tài)框里面加內(nèi)容
   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>水果名稱(chēng):"+lie[1]+"</div><div>水果價(jià)格："+lie[2]+"</div><div>水果產(chǎn)地："+lie[3]+"</div>";

     $("#nr").html(aa);
    }

   })
  })
 }

模態(tài)框的html代碼如下所示，點(diǎn)擊查看會(huì)蹦出模態(tài)框：

<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">&times;</button>
    <h4 class="modal-title" id="myModalLabel">詳細(xì)信息</h4>
   </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>

寫(xiě)完后頁(yè)面如下所示：