<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="Content/js/css/bootstrap.css" rel="stylesheet" />
<script src="Content/js/jquery-3.1.1.js"></script>
<style>

th {
background-color: #0094ff;
color: #f2f4f6;
text-align: center;
}

td {
text-align: center;
}
</style>
<script>
//文档就绪
$(function () {
//跳转页面
$("#btnAdd").click(function () {
location.assign("AddContacts.html");
})
Search();//查询功能
})
function Search() {
$("#list #newtr").remove();
var Name = $("#Name").val();
$.ajax({
url: "Handlers/ShowHandlers.ashx",
type: "post",
data: { "Name": Name },
dataType: "json",
success: function (data) {
console.log(data);
if (data.length > 0) {
var t = $("#list");
$(data).each(function () {
t.append("<tr id='newtr'>"
+ "<td>" + this.Name + "</td>"
+ "<td>" + (this.Sex ? "男" : "女") + "</td>"
+ "<td>" + this.Provences + ',' + this.City + "</td>"
+ "<td>" + this.Email + "</td>"
+ "<td>" + this.Tel + "</td>"
+ "<td><a href='Upd.html?Id=" + this.Id + "'>修改</a></td>"
+ "</tr>")
})
}
}
})
}
</script>
</head>
<body>
<div style="width:700px;margin:auto">
<h3><b>数据管理</b></h3>
<hr />
<p>
<input id="btnAdd" type="button" value="添加通讯录" class="btn btn-default" /><input id="Name" type="text" /><select id="selSex">
<option value="0">男</option>
<option value="1">女</option>
</select><input id="btnSearch" type="button" value="查询" class="btn btn-default" onclick="Search()" />
</p>
<table class="table table-bordered" id="list">
<tr>
<th>姓名</th>
<th>性别</th>
<th>地址</th>
<th>邮箱</th>
<th>手机号</th>
<th>操作</th>
</tr>
</table>

</div>
</body>
</html>

___Html页面使用Ajax做数据显示的更多相关文章

  1. 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  2. 使用AJAX做关键字查询：输入框变化自动搜索、无刷新页面;

    使用AJAX做关键字查询要求:1.无刷新页面2.输入框变化自动搜索 <style type="text/css"> .k{ width:150px; height:30 ...

  3. ajax 做登录 实现页面免刷新

    结合之前学的知识,可以用ajax来传递数据,实现页面不用刷新,仅数据刷新,来看一下ajax是怎么来实现页面免刷新的 方的是客户端,圆的是服务器 如果没有ajax的话,客户端直接把数据传给服务器,服务器 ...

  4. ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  5. 使用PHP中的ajax做登录页面、验证用户名是否可用、动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  6. 14.ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  7. 11月10日下午 ajax做显示信息以后用ajax、Bootstrp做弹窗显示信息详情

    1.用ajax做弹窗显示信息详情 nation.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  8. ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列

    AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.   ...

  9. AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动；

    js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...

随机推荐

  1. AMBA总线协议AHB、APB

    一.什么是AMBA总线 AMBA总线规范是ARM公司提出的总线规范,被大多数SoC设计采用,它规定了AHB (Advanced High-performance Bus).ASB (Advanced ...

  2. selenium IDE工具页面介绍！

    selenium IDE工具页面,常用功能点介绍

  3. 【工具篇】抓包中的王牌工具—Fiddler （1-环境搭建）

    导言 在现在高速发展的互联网时代,抓包工具被广泛应用在软件开发的项目中,Fiddler可谓是当下主流的抓包工具之一.测试人员用它来抓包.回放测试记录,构造发包测试用例,开发人员用来定位问题,其强大的功 ...

  4. 腾讯云存储专家深度解读基于Ceph对象存储的混合云机制

    背景 毫无疑问,乘着云计算发展的东风,Ceph已经是当今最火热的软件定义存储开源项目.如下图所示,它在同一底层平台之上可以对外提供三种存储接口,分别是文件存储.对象存储以及块存储,本文主要关注的是对象 ...

  5. 中小研发团队架构实践之生产环境诊断工具WinDbg

    生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具,Dump文件类似于飞机的黑匣子,记录着生产环境程序 ...

  6. 第11章 创建请求URLs - IdentityModel 中文文档(v1.0.0)

    该RequestUrl是创建与查询字符串参数,例如URL的帮手: var ru = new RequestUrl("https://server/endpoint"); // pr ...

  7. mysql 多实例部署

    Centos7.6 部署3个Mariadb 实例 [root@localhost ~]# yum install mariadb-server -y # 创建对应的目录文件 [root@localho ...

  8. 设计模式之组合模式——Java语言描述

    组合模式又叫做部分整体模式,适用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次 介绍 意图 将对象组合成树形结构以表示"部分-整体" ...

  9. 微信小程序echarts层级太高

    项目中因为需求,底部的tab导航栏是自己写的,在开发者工具中一切正常:但是在真机上页面滑动时,echarts的层级比tab高,调过两者的z-index后仍然如此. 经过查找后发现cover-view和 ...

  10. Centos 配置开机启动脚本启动 docker 容器

    Centos 配置开机启动脚本启动 docker 容器 Intro 我们的 Centos 服务器上部署了好多个 docker 容器,因故重启的时候就会导致还得手动去手动重启这些 docker 容器,为 ...