11月10日下午 ajax做显示信息以后用ajax、Bootstrp做弹窗显示信息详情
1.用ajax做弹窗显示信息详情
nation.php
<!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" />
<script src="../jquery-1.11.2.min.js"></script>
<script src="../tanchuang.js"></script><!--弹窗js文件-->
<title>无标题文档</title>
<link href="../tanchuang.css" rel="stylesheet" type="text/css" /><!--弹窗样式表-->
</head> <body>
<input type="button" value="显示" id="btn" /> <table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="sj">
<td>代号</td>
<td>名称</td>
<td>操作</td>
</tr>
<tbody id="tb"></tbody><!--表格的内容--> </table>
</body>
<script type="text/javascript"> //ajax在执行时异步执行，异步是指不管接收信息方接收到没有，只管发送信息。同步是指发送完信息以后确认接收方收到信息以后再发送下一条信息。ajax默认的是异步执行，异步执行效率比较高。
//zai ajax里面的异步是指在调用处理页面的同时继续往下执行代码。
$("#btn").click(function(){ $.ajax({
//async:false,//把ajax的加载方式变成同步的
url:"nationchuli.php",
dataType:"TEXT",
success: function(data){
var hang = data.split("|");
var str = ""; 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><span class='sc' bs='"+lie[0]+"'>删除</span><span class='xq' bs='"+lie[0]+"'>查看详情</span></td></tr>"; }
$("#tb").html(str);
//加事件
$(".sc").click(function(){ alert("aa"); })
//查看详情
$(".xq").click(function(){ var code = $(this).attr("bs");
$.ajax({ url:"xqchuli.php",
data:{code:code},
type:"POST",
dataType:"TEXT",
success: function(data){
var lie1 = data.split("^");
var str = "<div>代号："+lie1[0]+"</div><div>名称："+lie1[1]+"</div>";
var btn = "<input type='button' value='确定' class='qd' />"; var tc = new Window({
title:"详细信息",
content:str,
buttons:btn }); $(".qd").click(function(){
$(".zhuti").remove();
$("#zz").remove();
})
} }) }) }
}); //给删除加事件，如果在这加载并且是异步加载，页面上是没有点击事件的。因为异步执行会同时执行ajax和点击事件，而执行ajax时使用的时间比点击事件的多，所以当点击时，ajax还没有加载上，页面还没有加载上删除。
//解决方式有2种
//1是把ajax的加载方法变为同步的async:false,写的地方见上方代码。
//2.把下面的加点击事件的代码拿到ajax里面。
/*$(".sc").click(function(){ alert("aa"); })*/ }) </script>
</html>
nationchuli.php
<?php
include("../DBDA.class.php");
$db = new DBDA();
$sql = "select * from nation";
echo $db->StrQuery($sql);
xqchuli.php
<?php
include("../DBDA.class.php");
$db = new DBDA();
$code = $_POST["code"];
$sql = "select * from nation where code='{$code}'";
echo $db->StrQuery($sql);
2.用Bootstrp做弹窗
<!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" />
<script src="../jquery-1.11.2.min.js"></script>
<script src="../bootstrap.min.js"></script>
<title>无标题文档</title>
<link href="../bootstrap.min.css" rel="stylesheet" type="text/css" />
</head> <body>
<input type="button" value="显示" id="btn" /> <table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="sj">
<td>代号</td>
<td>名称</td>
<td>操作</td>
</tr>
<tbody id="tb"></tbody> </table>
<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>
</body>
<script type="text/javascript">
$("#btn").click(function(){ $.ajax({
url:"nationchuli.php",
dataType:"TEXT",
success: function(data){
var hang = data.split("|");
var str = ""; 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><span class='sc' bs='"+lie[0]+"'>删除</span><button class='btn btn-primary btn-lg xq' data-toggle='modal' data-target='#myModal' bs='"+lie[0]+"'>开始演示模态框</button></td></tr>"; }
$("#tb").html(str);
//加事件
$(".sc").click(function(){ alert("aa"); })
//查看详情
$(".xq").click(function(){ var code = $(this).attr("bs");
$.ajax({ url:"xqchuli.php",
data:{code:code},
type:"POST",
dataType:"TEXT",
success: function(data){
var lie1 = data.split("^");
var str ="<div>民族代号："+lie1[0]+"</div><div>民族名称："+lie1[1]+"</div>";
$("#nr").html(str);
} }) }) }
}); }) </script>
</html>
11月10日下午 ajax做显示信息以后用ajax、Bootstrp做弹窗显示信息详情的更多相关文章
- 2016年11月10日 星期四 --出埃及记 Exodus 20:1
2016年11月10日 星期四 --出埃及记 Exodus 20:1 And God spoke all these words: 神吩咐这一切的话说,
- .NET Conf 2020大会将于2020年11月10日--- 11月12日举行 （UTC）时区
.NET Conf 2020大会将于2020年11月10日--- 11月12日举行 (UTC)时区 开始时间 2020年11月10日 08:00 (PT) | 16:00 (UTC)| 24:00(北 ...
- 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
- 11月8日下午Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- 11月15日下午 ajax返回数据类型为XML数据的处理
ajax返回数据类型为XML数据的处理 /*XML:可扩展标记语言 HTML:超文本标记语言 标签:<标签名></标签名> 特点: 1.必须要有一个根 2.标签名自定义 3.对 ...
- 11月6日下午PHP分页查询（查询结果也显示为分页）
1.先把数据库里所有的数据分页显示在页面,并在显示数据的表格上方加上查询表单. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- # 36氪开放日 • 杭州 • 11月10日 # 谈谈参会感受
今天下午,第一次去参加了36氪的开放日,虽然站着听有点累,但是也很值得.会上很多创业者都分享和展示了他们的产品,一方面自己了解了一些产品人的故事,另一方面也对如何做产品有了新的认识.参会 ...
- 2018年11月10日 input,print,pass 用法，条件语句+字符串
name=input('请输入用户名')#永远等待用户输入 password=input('请输入密码') print(name) print(password) 变量定义的规则: 变量名只能是 字母 ...
- 易初大数据 2019年11月10日 spss习题 王庆超
◆1.一个数据文件包含下列数据,5个家庭没有汽车(编码为0),20个家庭有一辆汽车(编码唯1),10个家庭拥有两辆汽车(编码为2)指出下列哪种统计量适用于描述该数据并计算出统计量的值.A A拥有汽车数 ...
随机推荐
- oracle in VS or效率
select * from test where status in ('01', '02', '03', '111'); select * from test where status = '01' ...
- log4net不同logger输出日志
4步曲 1.引用log4net.dll(nuget) 2.任意位置的命名空间头部加入下面的代码,web.config可修改为自己定义的.xml [assembly: log4net.Config.Xm ...
- 对 Visual Studio 中的Resharper禁用对某种文件的检测
原因:在Visual Studio中安装Reshaper后,就会对各种文件进行代码检测,但是因为Reshaper更新的速度不是很及时,所以有时会对Visual Studio中某些新功能误断,导致Cod ...
- 【小白的CFD之旅】11 敲门实例【续】
主要内容: 接上文[小白的CFD之旅]10 敲门实例 2.4 Materials设置2.5 Cell Zone Conditions2.6 Boundary Conditons2.7 Dynamic ...
- 怎样制作FL Studio步进音序器中的节奏
了解了FL Studio一些操作功能后,我们就要去用这些操作功能完成我们想要的作品.所以今天小编就来带领大家在FL Studio的步进音序器中制作出简单的节奏,与此同时大家也会了解到通道的几个基础功能 ...
- NOIP2001 一元三次方程求解[导数+牛顿迭代法]
题目描述 有形如:ax3+bx2+cx+d=0 这样的一个一元三次方程.给出该方程中各项的系数(a,b,c,d 均为实数),并约定该方程存在三个不同实根(根的范围在-100至100之间),且根与根之差 ...
- COGS130. [USACO Mar08] 游荡的奶牛[DP]
130. [USACO Mar08] 游荡的奶牛 ★☆ 输入文件:ctravel.in 输出文件:ctravel.out 简单对比时间限制:1 s 内存限制:128 MB 奶牛们在被划 ...
- Core functionality.md
核心功能 在Nginx配置文件总可以把配置文件的结构如下: main配置段 event { ... } http { ... server { server_name root location /u ...
- 通过实战理解C语言精要——函数篇
前言 本篇博客是对C语言函数部分的重点内容和细枝末节通过实战得到的经验的总结精炼,不涵盖C语言函数的全部内容,所有提炼内容均来自提炼与实战,阅读需要对函数部分有一定基础,可用于对C语言函数的理解提 ...
- 【C#】C# 队列，
1.队列[先进先走,Dequeue():删除第一个并返回删除的这个],泛型[不确定参数的类型],