ajax 实现加载页面、删除、查看详细信息，以及bootstrap网页的美化

由于有些的程序员可能不是很会Photoshop，所以为了美化页面，我们可以借助工具bootstrap，实现起来相对就要比之前做的美观一些，

今天我用bootstrap把之前做的显示表格进行了一下美化，同时也把ajax部分进行了优化，看起来会更清晰

我没有下载bootstrap的包，直接从网页引用的

 <script src="jquery-3.1.1.min.js"></script>

     <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

     <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

 <?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)."|";  //每一行之间用“|”连接，这样最后就会多出一个“|”

 }

 $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">&times;</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>

写完后页面如下所示：

这样看起来页面就美观多了，而且代码用不同的方法封装后也显得整齐有序了，看起来不会太头疼

巴特西

ajax 实现加载页面、删除、查看详细信息，以及bootstrap网页的美化

最新文章

热门文章