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. .NET应用架构设计—面向查询的领域驱动设计实践（调整传统三层架构，外加维护型的业务开关）

    阅读目录: 1.背景介绍 2.在业务层中加入核心领域模型(引入DomainModel,让逻辑.数据有家可归,变成一个完整的业务对象) 3.统一协调层Application Layer(加入协调层来转换 ...

  2. Loadrunner代理录制设置

    使用LR代理录制原理 启用LR代理服务器监听设置好的端口号是否有请求信息发送给服务器,有请求时,代理服务器接收带请求,并转发给对应的系统服务器,LR从而获取到请求的信息与数据,生成脚本. 使用代理的前 ...

  3. JavaScript根据文件名判断文件类型

    //JavaScript根据文件名判断文件类型 var imgExt = new Array(".png",".jpg",".jpeg",& ...

  4. 今天主要推荐一下django学习的网址!

    前言:每个月忙碌的头20天后,在上班时间投入到django理论学习的过程中,花了差不多3天时间简单的研究了一下django,着实废了我不少脑细胞. 采用虫师前辈的一张图和话: 如果你把这过程梳理清晰了 ...

  5. Ubuntu1604中mysql的登录问题

    自从Ubuntu 1604出来后,新安装了尝试了下,在安装到mysql的时候用root登录不了,在网上查了很多资料都没找到解决办法.后来su到系统的root后直接就可以登录mysql了,看到Ubunt ...

  6. MyBatis 智能标签

    使用Where 只能标签 检索部门Y2162Dept 数据库已存在表Y2162Dept 实现动态查询 Deptno Deptname 赋值 不赋值 不赋值 赋值 赋值 赋值 不赋值 不赋值 <! ...

  7. SSH-Hibernate+Struts2+Spring的股票项目整合

    创建项目之前:我们需要导入我们需要的Hibernate和Struts2和Spring的相关架包.(博客自创,如有问题请留言博主,拒绝盗版,支持正版http://www.cnblogs.com/WuXu ...

  8. Matlab && C-Mex Round 1

    前言:本篇文章主要通过一个简单的例子程序对C-Mex进行一个初步的说明.前期的环境搭建(包括安装Matlab和gcc编译器)就不在这里赘述了. 在看文章之前,建议初学者先检查一下Matlab的mex配 ...

  9. LeetCode:N-Queens I II（n皇后问题）

    N-Queens The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no tw ...

  10. 如何查看SQL Server的版本、补丁包信息？以及如何鉴别是否需要升级自己的SQL Server?

    作为一个SQL Server的数据库管理人员,经常需要碰到的一个问题就是查看自己SQL Server属于哪个版本,是否安装了最新的修复补丁包,是否安装了最近的安全补丁.在此之前,我们可以通过以下SQL ...