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>

11月10日下午 ajax做显示信息以后用ajax、Bootstrp做弹窗显示信息详情的更多相关文章

  1. 2016年11月10日 星期四 --出埃及记 Exodus 20:1

    2016年11月10日 星期四 --出埃及记 Exodus 20:1 And God spoke all these words: 神吩咐这一切的话说,

  2. .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(北 ...

  3. 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  4. 11月8日下午Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  5. 11月15日下午 ajax返回数据类型为XML数据的处理

    ajax返回数据类型为XML数据的处理 /*XML:可扩展标记语言 HTML:超文本标记语言 标签:<标签名></标签名> 特点: 1.必须要有一个根 2.标签名自定义 3.对 ...

  6. 11月6日下午PHP分页查询（查询结果也显示为分页）

    1.先把数据库里所有的数据分页显示在页面,并在显示数据的表格上方加上查询表单. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  7. # 36氪开放日 • 杭州 • 11月10日 # 谈谈参会感受

           今天下午,第一次去参加了36氪的开放日,虽然站着听有点累,但是也很值得.会上很多创业者都分享和展示了他们的产品,一方面自己了解了一些产品人的故事,另一方面也对如何做产品有了新的认识.参会 ...

  8. 2018年11月10日 input,print,pass 用法，条件语句+字符串

    name=input('请输入用户名')#永远等待用户输入 password=input('请输入密码') print(name) print(password) 变量定义的规则: 变量名只能是 字母 ...

  9. 易初大数据 2019年11月10日 spss习题 王庆超

    ◆1.一个数据文件包含下列数据,5个家庭没有汽车(编码为0),20个家庭有一辆汽车(编码唯1),10个家庭拥有两辆汽车(编码为2)指出下列哪种统计量适用于描述该数据并计算出统计量的值.A A拥有汽车数 ...

随机推荐

  1. 烂泥：haproxy与nginx、zabbix集成

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb. 昨天介绍了haproxy的手机匹配规则,今天再来介绍下haproxy与nginx.za ...

  2. OpenStack中Keystone的基本概念理解

    原文http://www.kankanews.com/ICkengine/archives/10788.shtml Keystone简介 Keystone(OpenStack Identity Ser ...

  3. 用Lua扩展谷歌拼音输入法

    谷歌拼音输入法最后一次更新是2013年,最近2年毫无动静,这个产品应该已经停了,不过这并不影响对它的使用,我一直喜欢它的简洁和稳定. 说不上来什么原因,忽然想起了摆弄摆弄谷歌拼音输入法的扩展特性(我经 ...

  4. 第一次在Django上编写静态网页

    新建一个Python Django工程: Win+R进入cmd命令界面,并cd到指定工程目录下,比如我的工程目录是E:\wamp\Apache24\www\ 输入E: 跳转E盘 输入cd wamp\A ...

  5. EF继承关系映射

    继承映射策略的三种策略 There are following three different approaches to represent an inheritance hierarchy in ...

  6. OpenStack 行业正进入拓展期：行业云将成为新一轮工业革命的基础设施和引擎

    一直在关注华为2016 Connect 大会,本来没票,后来找朋友搞到了一张,参加了大会第一天下午的会议,时间虽短,但非常有收获.本来出发前还带了纸和笔,但是到了现场才发现只带了笔记本,笔却丢下了,所 ...

  7. jenkins,jmeter,ant持续集成

    1.安装 jenkins, jmeter, ant   2.将 jmeter下extras中的 ant-jmeter-1.1.1.jar拷贝到ant的lib下面 3.将 jmeter下collapse ...

  8. sql server 导出表结构到 word

    ------导出表结构语句1.执行以下查询 SELECT    表名       = case when a.colorder=1 then d.name else '' end,    表说明    ...

  9. C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 更优美的Oracle数据库上的代码生成器

    代码生成器进行了改进,针对Oracle数据库生成更优美的代码.这样生成出来的代码,更像微软的风格,更像C#.NET的标准规范,阅读起来也更优美.把Oracle表字段名默认大写, 有_分割等进行了优化, ...

  10. flex 布局笔记

    1,今天遇到一个问题,就是当元素布局设置为了flex后,里面的内容只有文字,但是对text-align 属性设置无效,仔细想了下,是因为把display 设置为了flex后,flex将里面的文字也认为 ...