ajax做显示信息以后用ajaxBootstrp做弹窗显示信息详情
Posted 陈山河z
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax做显示信息以后用ajaxBootstrp做弹窗显示信息详情相关的知识，希望对你有一定的参考价值。
nation.php
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <script src="../jquery-1.11.2.min.js"></script> 6 <script src="../tanchuang.js"></script><!--弹窗js文件--> 7 <title>无标题文档</title> 8 <link href="../tanchuang.css" rel="stylesheet" type="text/css" /><!--弹窗样式表--> 9 </head> 10 11 <body> 12 <input type="button" value="显示" id="btn" /> 13 14 <table width="100%" border="1" cellpadding="0" cellspacing="0"> 15 <tr id="sj"> 16 <td>代号</td> 17 <td>名称</td> 18 <td>操作</td> 19 </tr> 20 <tbody id="tb"></tbody><!--表格的内容--> 21 22 </table> 23 </body> 24 25 <script type="text/javascript"> 26 27 //ajax在执行时异步执行，异步是指不管接收信息方接收到没有，只管发送信息。同步是指发送完信息以后确认接收方收到信息以后再发送吓一跳信息。ajax默认的是异步执行，异步执行效率比较高。 28 //zai ajax里面的异步是指在调用处理页面的同时继续往下执行代码。 29 $("#btn").click(function(){ 30 31 $.ajax({ 32 //async:false,//把ajax的加载方式变成同步的 33 url:"nationchuli.php", 34 dataType:"TEXT", 35 success: function(data){ 36 var hang = data.split("|"); 37 var str = ""; 38 39 for(var i=0;i<hang.length;i++) 40 { 41 var lie = hang[i].split("^"); 42 43 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>"; 44 45 } 46 $("#tb").html(str); 47 //加事件 48 $(".sc").click(function(){ 49 50 alert("aa"); 51 52 }) 53 //查看详情 54 $(".xq").click(function(){ 55 56 var code = $(this).attr("bs"); 57 $.ajax({ 58 59 url:"xqchuli.php", 60 data:{code:code}, 61 type:"POST", 62 dataType:"TEXT", 63 success: function(data){ 64 var lie1 = data.split("^"); 65 var str = "<div>代号："+lie1[0]+"</div><div>名称："+lie1[1]+"</div>"; 66 var btn = "<input type=‘button‘ value=‘确定‘ class=‘qd‘ />"; 67 68 var tc = new Window({ 69 title:"详细信息", 70 content:str, 71 buttons:btn 72 73 }); 74 75 $(".qd").click(function(){ 76 $(".zhuti").remove(); 77 $("#zz").remove(); 78 }) 79 } 80 81 }) 82 83 }) 84 85 } 86 }); 87 88 //给删除加事件，如果在这加载并且是异步加载，页面上是没有点击事件的。因为异步执行会同时执行ajax和点击事件，而执行ajax时使用的时间比点击事件的多，所以当点击时，ajax还没有加载上，页面还没有加载上删除。 89 //解决方式有2种 90 //1是把ajax的加载方法变为同步的async:false,写的地方见上方代码。 91 //2.把下面的加点击事件的代码拿到ajax里面。 92 /*$(".sc").click(function(){ 93 94 alert("aa"); 95 96 })*/ 97 98 }) 99 100 </script> 101 102 </html>
nationchuli.php
1 <?php 2 include("../DBDA.class.php"); 3 $db = new DBDA(); 4 $sql = "select * from nation"; 5 echo $db->StrQuery($sql);
xqchuli.php
1 <?php 2 include("../DBDA.class.php"); 3 $db = new DBDA(); 4 $code = $_POST["code"]; 5 $sql = "select * from nation where code=‘{$code}‘"; 6 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">×</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>
以上是关于ajax做显示信息以后用ajaxBootstrp做弹窗显示信息详情的主要内容，如果未能解决你的问题，请参考以下文章
11月10日下午 ajax做显示信息以后用ajaxBootstrp做弹窗显示信息详情
ajax基础语法ajax做登录ajax做用户名验证是否可用ajax做关键字查询动态显示ajax做用表格显示数据并增加操作列