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. JavaScript按日期排序之灵活排序

    上代码: var dataContent = [ { ID: "1", hobbit: "去音乐", sport: "在篮球", movie ...

  2. (网页)HTML小技巧的一些小技巧

    转自CSDN: 1.怎样定义网页语言(字符集)?            在制作网页过程中,你首先要定义网页语言,以便访问者浏览器自动设置语言,而我们用所见即所得的HTML工具时,都没有注意到这个问题, ...

  3. linux 开机自启动脚本

    在/etc/rc.local文件中添加自启动命令(其中一种方法) 1.案例,就用博主本人之前发的博文 “nginx + flask + uwsgi + centos + python3 搭建web项目 ...

  4. 在ASP.NET Core中使用多环境

    原文地址:https://docs.microsoft.com/en-us/aspnet/core/fundamentals/environments?view=aspnetcore-2.1#star ...

  5. oracle 数据库 导出与导入 expdb和impdb使用方法 (服务器本机）

    expdb 与exp 导出数据有区异,exp 无法导出空值表,用于客户端,expdb 只用于服务器端.备份出来的数据可再远程传输到另外一台linux 实现异地备份! 一  关于expdp和impdp ...

  6. Linux 内存文件系统

    Linux内存文件系统:可满足高IO的要求 ramdisk: 基于虚拟在内存中的其他文件系统(ex2fs). 挂载方式:mount /dev/ram /mnt/ramdisk ramfs: 物理内存文 ...

  7. 【PAT】B1065 单身狗（25 分）

    #include<stdio.h> #include<algorithm> #include<math.h> using namespace std; int ca ...

  8. 房企大裁员；争议贺建奎；破产阴影下的ofo：4星|《财经》第29期

    <财经>2018年第29期 总第546期 旬刊 高水平的财经杂志.本期重要话题有:1:房企大裁员;2:争议贺建奎;3:破产阴影下的ofo; 总体评价4星,非常好. 以下是书中一些内容的摘抄 ...

  9. Some reading, some thinking.

    update:感谢助教0 0又学会一招,play 了一下CSS Part 1 · Reading Author Article Note Madcola <两年波折路(考研.工作.考研)> ...

  10. asp.net core 中使用StyleCop.StyleCopAnalyzers

    1.nuget中安装 StyleCop.Analyzers 当前版本1.1.0-beta004 2.在项目根目录新增 stylecop.json文件 { "settings": { ...