ajax实现加载页面、删除、查看详细信息 bootstra

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

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

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

<script src="https://www.jb51.net/jquery-3.1.1.min.js"></script> <link 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> <!--从bootstrap中引用了里面的class--> <thead> <tr> <th>水果名称</th> <th>水果价格</th> <th>水果产地</th> <th>操作</th> </tr> </thead> <tbody> </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]+"'>删除</button><button type='button' ids='"+lie[0]+"' 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 tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true">&times;</button> <h4>详细信息</h4> </div> <div> </div> <div> <button type="button" data-dismiss="modal">关闭</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div>

写完后页面如下所示：

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