ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!


Posted in Javascript onMarch 14, 2017

由于有些的程序员可能不是很会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">×</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美化页面!ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js保存当前路径(cookies记录)
Dec 14 Javascript
JavaScript中的this实例分析
Apr 28 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
jquery实现下载图片功能
Jul 18 jQuery
node.js爬虫爬取拉勾网职位信息
Mar 14 #Javascript
AngularJS实现页面定时刷新
Mar 14 #Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 #Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 #Javascript
Bootstrap笔记—折叠实例代码
Mar 13 #Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 #Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 #Javascript
You might like
一个颜色轮换的简单例子
2006/10/09 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
Symfony核心类概述
2016/03/17 PHP
PHP微信分享开发详解
2017/01/14 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
Python 变量类型及命名规则介绍
2013/06/08 Python
跟老齐学Python之用Python计算
2014/09/12 Python
python自动化生成IOS的图标
2018/11/13 Python
python3实现点餐系统
2019/01/24 Python
django基于restframework的CBV封装详解
2019/08/08 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
python中time包实例详解
2021/02/02 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
2015初中团支部工作总结
2015/07/21 职场文书
pandas数值排序的实现实例
2021/07/25 Python
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers