码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-01-12 10:01:42      阅读:41      评论:0      收藏:0      [点我收藏+]

标签:分页   jquer   post   jquery   click   i++   type   toggle   cin   

<!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对数据进行查看人员信息

标签:分页   jquer   post   jquery   click   i++   type   toggle   cin   

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!