用ajax对数据进行查看人员信息

<!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" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
<script src="bootstrap.min.js"></script>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
</head> <body> <h1>显示数据</h1>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>代号</td>
<td>姓名</td>
<td>性别</td>
<td>民族</td>
<td>生日</td>
<td>操作</td>
</tr> <tbody id="bg"> </tbody> </table> <!-- 模态框(Modal) -->
<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="content"></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"> $(document).ready(function(e) {
jiazai();
}); //加载数据的方法
function jiazai()
{
//异步
$.ajax({
url:"123123.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 += "<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td><input type='button' value='详情' class='xiangqing' code='"+lie[0]+"' data-toggle='modal' data-target='#myModal' /></td></tr>";
} $("#bg").html(str); $(".xiangqing").click(function(){ var code = $(this).attr("code"); $.ajax({
url:"123124.php",
data:{code:code},
type:"POST",
dataType:"TEXT",
success: function(d){
var lie = d.split("^");
var c = "<div>代号:"+lie[0]+"</div><div>姓名:"+lie[1]+"</div><div>性别:"+lie[2]+"</div><div>民族:"+lie[3]+"</div><div>生日:"+lie[4]+"</div>";
$("#content").html(c); }
}); }) }
});
} </script>
</html>

分页面:123123.PHP

把要显示的代号字母转换成汉字显示出来

<?php
include("DBDA.class.php");
$db = new DBDA(); $sql = "select * from info"; $attr = $db->Query($sql);
for($i=0;$i<count($attr);$i++)
{
$attr[$i][2]=$attr[$i][2]?"男":"女";
$sqll = " select name from nation where code = '{$attr[$i][3]}' ";
$de = $db->Query($sqll);
$attr[$i][3] = $de[0][0]; }
// n001^汉族|n002^回族
$str = "";
foreach($attr as $v)
{
$str .=implode("^",$v)."|";
}
//echo $str;
echo substr($str,0,strlen($str)-1);

分页面:123124.php

?php
include("DBDA.class.php");
$db = new DBDA();

$code = $_POST["code"];
$sql = "select * from info where code='{$code}'";

$attr = $db->Query($sql);

$attr[0][2]=$attr[0][2]?"男":"女";
    $sqll = " select name from nation where code = '{$attr[0][3]}' ";
    $de = $db->Query($sqll);
    $attr[0][3] = $de[0][0];
    $str = "";
            foreach($attr as $v)
            {
                $str .= implode("^",$v)."|";
            }
            
            echo substr($str,0,strlen($str)-1);

下面是运行结果
用ajax对数据进行查看人员信息

用ajax对数据进行查看人员信息

上一篇:Java_spark简单例子


下一篇:JQuery操作select下拉框