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">&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">
$("#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>

最新文章

  1. js正则表达式语法
  2. sql 定义自增id插入数据
  3. SCRUM项目 5.0
  4. IOS 计步器
  5. 标准C实现基于TCP/IP协议的文件传输
  6. 【转载】C语言中的undefined behavior/unspecified behavior - 序
  7. 关于favicon.ico的使用
  8. Swift 3.0 的 open,public,internal,fileprivate,private 关键字
  9. 树莓PI上跑爬虫
  10. 如何使用 Xcode Targets 管理开发和生产版本?
  11. mysql_config_editor
  12. [转载]做一个 App 前需要考虑的几件事
  13. -_-#gb2312解码
  14. keepalived + nginx
  15. Python之路【第三篇】:模块
  16. Can you find it?
  17. Spring Cloud Zuul 添加 ZuulFilter
  18. 【Tarjan】洛谷P3379 Tarjan求LCA
  19. python numpy 间的的数据变算公式
  20. amaze ui 滚动监听

热门文章

  1. 动态切换 web 报表中的统计图类型
  2. (网页)JQuery 对 Select option 的操作(转)
  3. recovery 差分升级包制作超时
  4. 如何修改redis配置
  5. java面试题之----spring MVC的原理和MVC
  6. [20171206]rman与truncate.txt
  7. 让bootstrap-table支持高度百分比
  8. linux内存源码分析 - SLAB分配器概述【转】
  9. Python &amp; 机器学习之项目实践
  10. Django学习---笔记一