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.11 开课二个月零七天（ajax和bootstrp做弹窗）的更多相关文章

  1. 11.10 （下午）开课二个月零六天（ajax验证用户名，ajax调数据库）

    用ajax验证用户名是否可用 testuid.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  2. 11.10 （上午）开课二个月零六天（ajax基础，ajax做登录）

    test.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  3. 11.8 开课二个月零四天 （Jquery取属性值，做全选，去空格）

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

  4. 11.8 开课二个月零四天 （Jquery）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 11月10日下午 ajax做显示信息以后用ajax、Bootstrp做弹窗显示信息详情

    1.用ajax做弹窗显示信息详情 nation.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  6. 11.7 （下午）开课二个月零三天 （PDO）

    PDO访问方式操作数据库   mysqli是专门访问MySQL数据库的,不能访问其它数据库.PDO可以访问多种的数据库,它把操作类合并在一起,做成一个数据访问抽象层,这个抽象层就是PDO,根据类操作对 ...

  7. Django中数据传输编码格式、ajax发送json数据、ajax发送文件、django序列化组件、ajax结合sweetalert做二次弹窗、批量增加数据

    前后端传输数据的编码格式(contentType) 提交post请求的两种方式: form表单 ajax请求 前后端传输数据的编码格式 urlencoded formdata(form表单里的) ja ...

  8. 【阿里聚安全·安全周刊】阿里双11技术十二讲直播预约|AWS S3配置错误曝光NSA陆军机密文件

    关键词:阿里双11技术十二讲直播丨雪人计划丨亚马逊AWS S3配置错误丨2018威胁预测丨MacOS漏洞丨智能风控平台MTEE3丨黑客窃取<权利的游戏>剧本|Android 8.1   本 ...

  9. 【NOIP2015模拟11.2晚】JZOJ8月4日提高组T2 我的天

    [NOIP2015模拟11.2晚]JZOJ8月4日提高组T2 我的天 题目 很久很以前,有一个古老的村庄--xiba村,村子里生活着n+1个村民,但由于历届村长恐怖而且黑暗的魔法统治下,村民们各自过着 ...

随机推荐

  1. 小程序 青少儿书画 利用engineercms作为服务端

    因为很多妈咪们喜欢发布自己宝宝的作品,享受哪些美好时刻,记录亲子创作过程. 为了方便妈咪们展示亲子创作,比如宝宝们画作,涂鸦,书法,作文,其他才艺,特利用engineercms作为服务端,重新设计了一 ...

  2. C语言编程比赛WBS

  3. [20171110]_allow_read_only_corruption参数.txt

    [20171110]_allow_read_only_corruption参数.txt --//昨天在修改查询隐含参数脚本时发现一个参数_allow_read_only_corruption,感觉应该 ...

  4. psotgresql之大小写

    框中内容来自<PostgreSQL数据库对象名大小写敏感> 网址:http://bbs.chinaunix.net/forum.php?mod=viewthread&tid=812 ...

  5. exec 动态脚本 里面的参数和sp_executesql （注意引号，否则容易异常）

    @indexCt int@DemographicName nvarchar(500)INSERT INTO #finalTemp EXEC('SELECT a.QuestionId,a.AnswerI ...

  6. 辽宁移动宽带体验及魔百盒M101s-2刷机

    一.背景 坐标:辽宁 某城,移动宽带100M. 设备:移动赠送,华为光猫一只,魔百盒M101s-2电视盒子 一只,据安装人员说这个魔百盒是移动自己开发设计的. 二.上网体验 上网:浏览一般网站没问题. ...

  7. wordpress使用rsync加openvpn进行同步和备份

    目录 wordpress使用rsync加openvpn进行同步和备份 环境 普通同步策略的弊端 改良的同步方案 从头细说起 备份数据 打包wordpress项目和备份 服务端安装rsync 服务端配置 ...

  8. 三叔学FPGA系列之一：Cyclone V中的时钟资源

    之前的项目中更多的是有师兄提供经验和帮助,追求的是快速上手,所以不管对于硬件电路设计,还是verilog电路编程,甚至是FPGA内部的资源,都没来得及系统地学习,最近在做算法到电路的实现,正好系统学习 ...

  9. DAG 动态规划 巴比伦塔 B - The Tower of Babylon

    题目:The Tower of Babylon 这是一个DAG 模型,有两种常规解法 1.记忆化搜索, 写函数,去查找上一个符合的值,不断递归 2.递推法 方法一:记忆化搜索 #include < ...

  10. Scrapy中将item字段转为简体or繁体

    1. 安装hanziconv安装一个简繁体转换的包: pip install hanziconv 2. 自定义一个itempiples找到项目中的pipelines.py文件 添加自定义的pipeli ...