<!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. JDK10安装配置详解

    JDK10安装配置详解 1. 下载jdk10 1.1 官网下载jdk7的软件包:        地址:http://www.oracle.com/technetwork/java/javase/dow ...

  2. kali下安装截图软件

    安装截图软件 1.下载安装python-xlib apt-get install python-xlib 2.下载截图软件包 wget http://packages.linuxdeepin.com/ ...

  3. numpy C语言源代码调试（二）

    前一篇已经介绍,可以使用gdb进行调试,但是本人不太习惯gdb的文本界面,所以希望找一个比较好用的gdb的前端gui调试器. 想到的第一个是一个非常老的调试工具,DDD. DDD - Data Dis ...

  4. Docker最全教程之Go实战，墙裂推荐（十八）

    前言 与其他语言相比,Go非常值得推荐和学习,真香!为什么?主要是可以直接编译成机器代码(性能优越,体积非常小,可达10来M,见实践教程图片)而且设计良好,上手门槛低.本篇主要侧重于讲解了Go语言的优 ...

  5. Git 下载代码简单说明

    昨天看码云上有两个项目感觉很好, 可惜竟然不会Git 找了很久看了好多文档看他写的都好复杂啊! 在这我给写出来一点点 1.下载Git  https://git-scm.com/download/win ...

  6. jbpm - 工作流的基本操作

    Jbpm流程引擎. 定义:jbpm,全称是Java Business Process Management(业务流程管理),他是覆盖了业务流程管理,工作流管理,服务协作等领域的一个开源的,灵活的,易扩 ...

  7. Fundebug支付宝小程序BUG监控插件更新至0.2.0，新增test()方法，报错增加Page数据

    摘要: 0.2.0新增fundebug.test()方法,同时报错增加了Page数据. Fundebug提供专业支付宝小程序BUG监控服务,可以第一时间为您捕获生存环境中小程序的异常.错误或者BUG, ...

  8. Angular（01）-- 架构概览

    声明 本系列文章内容梳理自以下来源: Angular 官方中文版教程 官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主 ...

  9. odoo：免费开源ERP入门与实践

    Odoo下载安装 Odoo社区版下载链接:http://nightly.odoo.com/ ,下载11.0社区版Windows安装包:http://nightly.odoo.com/11.0/nigh ...

  10. oppo8.0系统怎么无需Root激活Xposed框架的经验

    在较多部门的引流,或业务操作中,基本都需要使用安卓的神一般的xposed框架,近期我们部门购来了一批新的oppo8.0系统,基本都都是基于7.0以上版本,基本都不能够刷入root的su权限,虽说一部分 ...