<!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对数据进行查看人员信息的更多相关文章

  1. ajax Post数据，并得到返回结果，密码加密（Select，checkbox）

    使用ajax Post数据到后台Server,并从后台返回数据给前端WEB: urls.py: from django.conf.urls import url from aptest import ...

  2. pandas_查看数据特征和统计信息

    # 查看数据特征和统计信息 import pandas as pd # 读取文件 dataframe = pd.read_excel(r'C:\Users\lenovo\Desktop\总结\Pyth ...

  3. thinkphp+datatables+ajax 大量数据服务器端查询

    今天一白天全耗在这个问题上了,知乎2小时除外... 现在19:28分,记下来以备后查. 问题描述:从后台数据库查询人员信息,1w多条,使用一个好看的基于bootstrap的模板 Bootstrap-A ...

  4. Liunx下查看服务器硬件信息

    一.如何查看服务器的CPU 今天安装了9台Linux服务器,型号完全不一样(有DELL. HP和IBM服务器),又懒得去对清单,如何在Linux下cpu的个数和核数呢?另外,nginx的cpu工作模式 ...

  5. vue ajax获取数据的时候，如何保证传递参数的安全或者说如何保护api的安全

    https://segmentfault.com/q/1010000005618139 vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全 点击提交,发送请求.但是api ...

  6. 渐进式web应用开发---ajax本地数据存储(四)

    在前几篇文章中,我们使用service worker一步步优化了我们的页面,现在我们学习使用我们之前的indexedDB, 来缓存我们的ajax请求,第一次访问页面的时候,我们请求ajax,当我们继续 ...

  7. 渐进式web应用开发---使用indexedDB实现ajax本地数据存储(四)

    在前几篇文章中,我们使用service worker一步步优化了我们的页面,现在我们学习使用我们之前的indexedDB, 来缓存我们的ajax请求,第一次访问页面的时候,我们请求ajax,当我们继续 ...

  8. 扩展auth_user字段、BBS需求分析、创建BBS数据库、注册页面搭建与用户头像展示及Ajax提交数据

    昨日内容回顾 csrf跨站请求 1. SQL注入 2. xss攻击 3. csrf跨站请求 4. 密码加密(加盐) '''django中默认有一个中间件来验证csrf''' # 只针对post请求才验 ...

  9. Sql Server之使用T_SQL创建，修改，查看数据库信息

    一.使用Transact_SQL创建数据库 Transact_SQL语法如下:  create database database_name   [ on     [primary]  [<fi ...

随机推荐

  1. Apache无法启动解决 the requested operation has failed

    Apache不能启动解决办法 原因一:80端口占用例如IIS,另外就是迅雷. 原因二:软件冲突装了某些软件会使apache无法启动如Dr.com 你打开网络连接->TcpIp属性->高级- ...

  2. mongodb group包（最具体的、最受欢迎、最容易理解的解释）

    和数据库一样group经常常使用于统计.MongoDB的group还有非常多限制,如:返回结果集不能超过16M, group操作不会处理超过10000个唯一键.好像还不能利用索引[不非常确定]. Gr ...

  3. leetcode 34 Search Insert Position

    Given a sorted array and a target value, return the index if the target is found. If not, return the ...

  4. 由浅入深学习.NET CLR 系列：目录

    经过对Android的一阵折腾,些许熟悉了一些Java的东东,又开始转战.NET.我觉得学习最好和工作不要相离太远,才会更加随笔随意,索性整理一些比较系统的.NET的基础知识学习学习.一提起学习.NE ...

  5. Unit Of Work-工作单元

    Unit Of Work-工作单元 阅读目录: 概念中的理解 代码中的实现 后记 掀起了你的盖头来,让我看你的眼睛,你的眼睛明又亮呀,好像那水波一模样:掀起了你的盖头来,让我看你的脸儿,看看你的脸儿红 ...

  6. TDD中的单元测试

    TDD中的单元测试写多少才够?   测试驱动开发(TDD)已经是耳熟能详的名词,既然是测试驱动,那么测试用例代码就要写在开发代码的前面.但是如何写测试用例?写多少测试用例才够?我想大家在实际的操作过程 ...

  7. bzero与memset

    bzero:原型:void bzero(void *s, int n); 功能:置字节字符串s的前n个字节为零且包括‘\0’. 说明:bzero无返回值,并且使用strings.h头文件,string ...

  8. 二分法-C++

    对于一个非线性方程f(x)=0求改方程的根,我们的思路可以这么想: 1.根的存在性.若该方程没有根,何必徒劳想法设法去求它的解呢?对于一个方程,我们怎么去找他的根,有连续函数零点定理可知:若有f(a) ...

  9. 次短路[SPFA]

    Description 贝茜把家搬到了一个小农场,但她常常回到FJ的农场去拜访她的朋友.贝茜很喜欢路边的风景,不想那么快地结束她的旅途,于是她每次回农场,都会选择第二短的路径,而不象我们所习惯的那样, ...

  10. CentOS6.8安装JDK1.7

    一.查看当前系统是否自带JDK rpm -qa | grep java tzdata-java-2016c-1.el6.noarch java-1.7.0-openjdk-1.7.0.99-2.6.5 ...