ajax 實現加載頁面、刪除、查看詳細信息，以及bootstrap網頁的美化

時間 2019-11-17

標籤 ajax 實現加載頁面刪除查看詳細信息以及 bootstrap 網頁美化欄目 Ajax 简体版

原文原文鏈接

因爲有些的程序員可能不是很會Photoshop，因此爲了美化頁面，咱們能夠藉助工具bootstrap，實現起來相對就要比以前作的美觀一些，javascript

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

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

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

注意：若是要引用其中一個包含jquery的多個JS文件，那麼jquery文件必定要放在第一位html

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

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

 1 <?php
 2 header("Content-type:text/html;charset=utf-8");
 3 
 4 $ids=$_POST["ids"];
 5 
 6 include("DADB.class.php");
 7 $db=new DADB();
 8 $sql="select * from fruit where ids='{$ids}' ";
 9 $arr=$db->Query($sql,1);
10 
11 $str="";
12 foreach($arr as $v)
13 {
14     $str=$str.implode("^",$v)."|";  //每一行之間用「|」鏈接，這樣最後就會多出一個「|」
15 }
16 $str=substr($str,0,strlen($str)-1); //把最後多出的「|」用截取字符串的方式刪去
17 echo $str;
18 ?>

ajax部分代碼以下：程序員

 1 <script type="text/javascript">
 2     Load();
 3     function Load() {
 4         $.ajax({
 5             url: "jiazaiym.php",
 6             dataType: "TEXT",
 7             success: function (data) {
 8                 //alert(data);
 9                 var str = "";
10                 var hang = data.split("|");
11 
12                 for (var i = 0; i < hang.length; i++) {
13                     var lie = hang[i].split("^");
14                     str = str + "<tr><td>" + lie[1] + "</td><td>"
15                         + 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寫刪除和查看的按鈕
16 
17                 }
18                  $("#tb").html(str);
19 
20                  addshanchu();
21                   chakan();
22                 }
23 
24         })
25     }
26 
27     //刪除頁面的方法
28     function addshanchu(){
29     $(".sc").click(function() {
30         var ids = $(this).attr("ids");
31         $.ajax({
32             url: "shanchu.php",
33             data: {ids:ids},
34             type: "POST",
35             dataType: "TEXT",
36             success: function (aa) {    //去空格
37                 if (aa.trim() == "OK") {
38                     alert("刪除成功");
39                     Load();
40                 }
41                 else {
42                     alert("刪除失敗");
43                 }
44             }
45         })
46     })
47     }
48 
49     //查看的方法：
50     function  chakan()
51     {
52         $(".ck").click(function(){
53             //顯示模態框
54 //           $('#myModal').modal('show');
55 
56             //往模態框裏面加內容
57             var ids =$(this).attr("ids");
58 
59             $.ajax({
60                 url:"xiangqing.php",
61                 data:{ids:ids},
62                 type:"POST",
63                 dataType:"TEXT",
64                 success:function(chakan)
65                 {
66 
67                     var lie=chakan.split("^");
68 
69                     var aa="<div>水果名稱:"+lie[1]+"</div><div>水果價格："+lie[2]+"</div><div>水果產地："+lie[3]+"</div>";
70 
71                     $("#nr").html(aa);
72                 }
73 
74             })
75         })
76     }

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

 1 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 2     <div class="modal-dialog">
 3         <div class="modal-content">
 4             <div class="modal-header">
 5                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 6                 <h4 class="modal-title" id="myModalLabel">詳細信息</h4>
 7             </div>
 8             <div class="modal-body" id="nr">
 9 
10             </div>
11             <div class="modal-footer">
12                 <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
13             </div>
14         </div><!-- /.modal-content -->
15     </div><!-- /.modal -->
16 </div>