<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

在使用bootstrap和jQuery前需要引入这三个文件
<link href="dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="../jquery/jquery-1.11.2.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<style type="text/css">
.xq{ margin-left:5px}
</style>
</head>

<body>
<h1>显示数据</h1>

<table class="table table-striped">
<thead>
<tr>
<th width="30%">代号</th>
<th width="30%">名称</th>
<th width="40%">操作</th>
</tr>
</thead>
<tbody id="tb">

</tbody>
</table>

<!--模态框-->
<!-- 模态框（Modal） -->
<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>

</body>
<script type="text/javascript">

加载数据
Load();

加载数据的方法
function Load()
{
$.ajax({
url:"jiazai.php",
dataType:"TEXT",
success: function(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[0]+"</td><td>"+lie[1]+"</td><td><button type='button' class='btn btn-info btn-sm sc' code='"+lie[0]+"'>删除</button><button type='button' class='btn btn-primary btn-sm xq' code='"+lie[0]+"'>查看详情</button></td></tr>";
}
$("#tb").html(str);

addshanchu();
addxiangqing();

}
});

}

给删除按钮加事件的方法
function addshanchu()
{
删除事件
$(".sc").click(function(){
var code = $(this).attr("code");
$.ajax({
url:"shanchu.php",
data:{code:code},
dataType:"TEXT",
type:"POST",
success: function(d){
if(d.trim()=="OK")
{
alert("删除成功");
Load();
}
else
{
alert("删除失败");
}
}
});
})
}

给查看详情加事件的方法
function addxiangqing()
{
$(".xq").click(function(){

显示模态框
$('#myModal').modal('show');

在模态框里面显示内容
var code = $(this).attr("code");
$.ajax({

url:"xiangqing.php",
data:{code:code},
dataType:"TEXT",
type:"POST",
success:function(data){
var lie = data.split("^");

var str = "<div>民族代号："+lie[0]+"</div><div>民族名称："+lie[1]+"</div>";

$("#nr").html(str);
}
});
})
}

</script>
</html>

bootstrap和ajax相结合的更多相关文章

  1. daterangepicker+ bootstrap +php +ajax +datatable双日历的使用

    在练习基于bootstrap   datatable的使用时,时间插件用到了daterangepicker,特做稍微了解,效果如图: 1.html <div class="panel& ...

  2. bootstrap的ajax提交

    一般后台界面都用bootstrap框架,这是一个css框架,里面封装了ajax方法,只需要在样式中指定就行,根本自己不用写 <td> <eq name='item.status' v ...

  3. bootstrap通过ajax请求JSON数据后填充到模态框

    1.   JSP页面中准备模态框 <!-- 详细信息模态框(Modal) --> <div> <div class="modal fade" id=& ...

  4. 基于bootstrap + php +ajax datatable 插件的使用

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 下面是我学习datatables写的一个服务器端(php)分页例子,该功能包含的功能 ...

  5. Ajax 实现无刷新页面

    注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...

  6. 70后.net老猿，尚能饭否？

    程序猿的大限 距离上一次主动找工作,快到5年了,到现在的东家,是差不多3年前猎头挖过来的,而当时东家刚刚被欧洲一家有百年历史的跨国企业集团收购,所以我也就有幸成了一名“外企员工”,但是集团保留原东家人 ...

  7. Oracle数据库开发

    Oracle数据库开发之PL/SQL基础实战视频课程 1 PL/SQL 简介 2 入门实例(一) 3 入门实例(二) 4 PL/SQL 变量和常量 5 PL/SQL数据类型(一) 6 PL/SQL数据 ...

  8. Python学习路程day21

    本节内容: 项目实战:开发一个WEB聊天室 功能需求: 用户可以与好友一对一聊天 可以搜索.添加某人为好友 用户可以搜索和添加群 每个群有管理员可以审批用户的加群请求,群管理员可以用多个,群管理员可以 ...

  9. 说说web 2.0生态圈的那些事

    先来说一道面试题吧,“说一下,web 2.0 和web 1.0的区别?” 官方的解释是这样的: Web1.0 的主要特点在于用户通过浏览器获取信息,Web2.0 则更注重用户的交互作用,用户既是网站内 ...

随机推荐

  1. POJ 2636

    #include<iostream> #include<stdio.h> using namespace std; int main() { //freopen("a ...

  2. Microsoft SQL Server on Linux 踩坑指南

    微软用 SQL Server 在 2016 年的时候搞了一个大新闻,宣传 Microsoft ❤️ Linux 打得一众软粉措手不及.但是这还是好事情,Linux 上也有好用的 SQL Server ...

  3. Selenium自动化测试Python四：WebDriver封装

    WebDriver 封装 欢迎阅读WebDriver封装讲义.本篇讲义将会重点介绍Selenium WebDriver API的封装的概念和方法,以及使用封装进行自动化测试的设计. WebDriver ...

  4. Jenkins使用TFS部署

    之前发表过一篇Jenkins的文章 使用Jenkins部署.Net应用程序 里面是使用GIT做的版本管理 今天更新下使用TFS做版本管理 首先在插件管理中搜索tfs,我这里因为已经装了,所以在已安装列 ...

  5. java断言assert初步使用：断言开启、断言使用

    1 说明 java断言assert是jdk1.4引入的. jvm断言默认是关闭的. 断言可以局部开启的,如:父类禁止断言,而子类开启断言,所以一般说“断言不具有继承性”. 断言只适用复杂的调式过程. ...

  6. 前端自动构建工具Gulp入门

    基于nodeJs:通过不同插件能自动完成一系列动作,比如压缩js/css/img.解析模版标签.解析less等: 一.安装gulp 安装nodeJs 打开Node.js command prompt ...

  7. Android so文件进阶 <一>

    0x00  前言   最近一段时间在弄android方面的东西,今天有人发了张截图,问:在要dump多大的内存? 一时之间我竟然想不起来ELF文件的哪个字段表示的是文件大小,虽然最后给出了解决方法,I ...

  8. selenium3 无人工干预地自动下载某个文件

    一:主要内容 下载效果展示 代码内容展示 saveToDisk不生效说明,即文件没有下载下来解决办法 二:展示效果 1.下载效果展示 用selenium3无人工干预的自动下载该文件到指定路径下,如:D ...

  9. [转]centos7 移动mysql5.7.19 数据存储位置

    本文转自:https://blog.csdn.net/chpllp/article/details/78211351 场景:随着数据量的增加,mysql所在的磁盘已占满,需要将data移动到空间较大的 ...

  10. @Styles的nameSpace是什么

    先参考下面一篇<创建第一个MVC应用程序> http://www.cnblogs.com/insus/p/3358560.html,Insus.NET创建了一个空的MVC应用程序. 在创建 ...