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 相关文章推荐
让IE6支持min-width和max-width的方法
Jun 25 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
vue两组件间值传递 $router.push实现方法
May 15 Javascript
jQuery表单选择器用法详解
Aug 22 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
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
PHP下对字符串的递增运算代码
2010/08/21 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
python实现人人自动回复、抢沙发功能
2018/06/08 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
Django接收自定义http header过程详解
2019/08/23 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
个人求职信范例
2014/01/29 职场文书
安全生产承诺书
2014/03/26 职场文书
中学生演讲稿
2014/04/26 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
工会主席事迹材料
2014/06/03 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
房屋所有权证明
2014/10/20 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书