首页 > 代码库 > ajax 实现加载页面、删除、查看详细信息,以及bootstrap网页的美化
ajax 实现加载页面、删除、查看详细信息,以及bootstrap网页的美化
由于有些的程序员可能不是很会Photoshop,所以为了美化页面,我们可以借助工具bootstrap,实现起来相对就要比之前做的美观一些,
今天我用bootstrap把之前做的显示表格进行了一下美化,同时也把ajax部分进行了优化,看起来会更清晰
我没有下载bootstrap的包,直接从网页引用的
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文件一定要放在第一位
下面是我在首页把显示的表格进行了美化,用了条纹表格,相对来说更美观了
<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
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代码如下所示,点击查看会蹦出模态框:
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">×</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>
写完后页面如下所示:
这样看起来页面就美观多了,而且代码用不同的方法封装后也显得整齐有序了,看起来不会太头疼
ajax 实现加载页面、删除、查看详细信息,以及bootstrap网页的美化
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。