<!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. Nodejs使用coffeescript编写的用户注册/登陆代码(MySQL)

    记录一下,以备后用 Settings = require '../../settings.js' exports.register = (req, res) -> nick_name = req ...

  2. 经常使用Javascript CDN 对照

    [前言] 请参阅某种网上文章: http://c7sky.com/javascript-libraries-cdn.html 本文加入的各个cdn对一些库的更新情况.以及响应时间. [更新] 发表文章 ...

  3. SQL点滴18—SqlServer中的merge操作，相当地风骚

    原文:SQL点滴18-SqlServer中的merge操作,相当地风骚 今天在一个存储过程中看见了merge这个关键字,第一个想法是,这个是配置管理中的概念吗,把相邻两次的更改合并到一起.后来在tec ...

  4. SQL点滴13—收集SQLServer线程等待信息

    原文:SQL点滴13-收集SQLServer线程等待信息 要知道线程等待时间是制约SQL Server效率的重要原因,这一个随笔中将学习怎样收集SQL Server中的线程等待时间,类型等信息,这些信 ...

  5. 1.3 LINQ查询

    LINQ最具突破性的优势在于将文本查询与对象操作完美集成,它让查询数据和操作对象一样安全和轻松.查询(Query)是LINQ的核心概念之一. 传统意义上的数据查询语言,通常是比较易懂,具有一定语义的文 ...

  6. 读书笔记—CLR via C#委托和attribute

    前言 这本书这几年零零散散读过两三遍了,作为经典书籍,应该重复读反复读,既然我现在开始写博了,我也准备把以前觉得经典的好书重读细读一遍,并且将笔记整理到博客中,好记性不如烂笔头,同时也在写的过程中也可 ...

  7. web中纯java获取配置文件中的数据

    /*********获取配置文件,但配置文件中的值改变,不会随着值的改变也获取的参数值改变**********/  /**   * 原因是因为,类装载,装载完后,不会再去装载了   * *///  I ...

  8. JS事件调试

    JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置   日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法. ...

  9. SignalR的服务器广播

    可以试试 https://github.com/angular-ui/bootstrap 这个框架啊 [渣译文] SignalR 2.0 系列:SignalR的服务器广播 2014-03-13 09: ...

  10. keepalive学习

    keepalive学习之软件设计 软件架构如下图所示: Keepalived 完全使用标准的ANSI/ISO C写出. 该软件主要围绕一个中央I/O复用分发器而设计,这个I/O复用分发器提供网络实时功 ...