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. 2015年度总结--javaWeb

    注:本来应该前的发,不过过年没有心思管博客了,另外网络也不是很方便,我想可以帮助大家了解一下javaweb吧. 之前的文章中说到,由于要做手机端安卓程序,所以开始使用java.实际上大部分的java程 ...

  2. GacUI学习（一）

    GacUI学习(一)之高仿系统记事本(一) 转载请注明来源:http://www.cnblogs.com/lyfh/p/6107215.html GacUI是轮子哥(vczh)精心打造的跨平台C++转 ...

  3. form表单取消按钮自动提交

    默认写在form表单里的按钮可以自动提交表单,现在要实现的效果是点击button按钮调用js函数,再有ajax提交 <button type="button" class=& ...

  4. 使用Sqlserver更新锁防止数据脏读

    有时候我们需要控制某条记录在程序读取后就不再进行更新,直到事务执行完释放后才可以.这时候我们就可以将所有要操作当前记录的查询加上更新锁,以防止查询后被其它事务修改.这种操作只锁定表中某行而不会锁定整个 ...

  5. [WPF系列]-DataBinding 枚举类型数据源

    public class EnumerationDataProvider : ObjectDataProvider { public Type EnumerationType { get; set; ...

  6. PhotoShop算法原理解析系列 - 风格化---》查找边缘。

    之所以不写系列文章一.系列文章二这样的标题,是因为我不知道我能坚持多久.我知道我对事情的表达能力和语言的丰富性方面的天赋不高.而一段代码需要我去用心的把他从基本原理-->初步实现-->优化 ...

  7. 在 Azure HDInsight 中安装和使用 Spark

    Spark本身用Scala语言编写,运行于Java虚拟机(JVM).只要在安装了Java 6以上版本的便携式计算机或者集群上都可以运行spark.如果您想使用Python API需要安装Python解 ...

  8. Appium学习实践（五）遇到的坑（记录自己工作中遇到的坑以及解决方案，不定时更新）

    1.错误截图,有时候测试用例执行错误的话,相对于复杂的log,一张错误截图也许能更明确哪里出的问题(当然有时,截图+log还是最好了) 坑:本来是想测试用例fail的时候捕获异常来执行截图操作,但是由 ...

  9. 在文件夹中 的指定类型文件中 查找字符串（CodeBlocks+GCC编译，控制台程序，仅能在Windows上运行）

    说明: 程序使用 io.h 中的 _findfirst 和 _findnext 函数遍历文件夹,故而程序只能在 Windows 下使用. 程序遍历当前文件夹,对其中的文件夹执行递归遍历.同时检查遍历到 ...

  10. java集合中List与set的区别

       java集合中List与set的区别.     List可以存储元素为有序性并且元素可以相同.     set存储元素为无序性并且元素不可以相同.     下面贴几段代码感受一下: ArrayL ...