<!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. 浅谈 js eval作用域

    原文:浅谈 js eval作用域 就简单聊下如何全局 eval 一个代码. var x = 1; (function () { eval('var x = 123;'); })(); console. ...

  2. .net使用cefsharp开源库开发chrome

    .net使用cefsharp开源库开发chrome 离上篇写介绍pc端的混合开发和为什么以cefsharp入手研究混合开发已经有好几天,一直忙,抽不出时间继续写怎么搭建cefsharp开发环境.其实没 ...

  3. PDFBox之文档创建

    1.创建一个空的PDF 下面的小例子表示如何使用PDFBox来创建一个新的PDF文档. // 创建一个空的文档 PDDocument document = new PDDocument(); // 创 ...

  4. android项目--上下文菜单

    一般说到上下文菜单基本上都是长按事件,在一个控件上长按,就会弹出一个菜单. 1.创建上下文菜单: //覆盖方法,创建上下文菜单 @Override public void onCreateContex ...

  5. wcf契约版本处理与异常处理（随记）

    -----------版本控制策略:必须支持向后兼容:----就是当服务端发生改变,但客户端未更新会不会发生错误: 一旦契约发布,若要契约发生变化,如何不影响客户端使用: ----wsdl:契约: 服 ...

  6. Jenkins中关于一些插件的使用方法

    最近在为公司搭建CI平台过程中,以及在具体项目实施过程中使用过的一些插件的具体用法: 1. ant插件 这个插件可能是我们最为经常使用的,若构建脚本是使用build.xml的,那构建引擎肯定会选择an ...

  7. [置顶] Hibernate从入门到精通（十）多对多单向关联映射

    上一篇文章Hibernate从入门到精通(九)一对多双向关联映射中我们讲解了一下关于一对多关联映射的相关内容,这次我们继续多对多单向关联映射. 多对多单向关联映射 在讲解多对多单向关联映射之前,首先看 ...

  8. C# 学习笔记2 C#底层的一些命令运行

    C#在DCP中运行的方法: 1.转到相应的目录 cd d:\1 2.输入csc /target:exe 2.cs 或者 csc /t:exe 2.cs 或者 csc 2.cs 在里边引用外部程序集的方 ...

  9. Markdown 代码测试！

    # Mou ![Mou icon](http://mouapp.com/Mou_128.png) ## Overview **Mou**, the missing Markdown editor fo ...

  10. iOS基础 - 瀑布流

    一.瀑布流简介 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pint ...