<!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. hibernate深度学习 游离状态 HQL

    当我学完这个之后 我仿佛都懂了 = =或许这就是 hibernate的力量吧. 操纵持久化对象(Session) 1.1. 在hibernate中java对象的状态 Hibernate 把对象分为 4 ...

  2. HTML标题

    HTML 标题 在 HTML 文档中,标题很重要. HTML 标题 标题(Heading)是通过 <h1> - <h6> 标签进行定义的. <h1> 定义最大的标题 ...

  3. Mock接口平台Moco学习

    Mock就是模拟接口的.本文学习Mock的 Moco开源框架. Moco源码和jar下载地址: git  jar  下载moco-runner-xxxx-standalone.jar moco的启动及 ...

  4. SprintBoot的@ComponentScan“踩坑”

    主要的话说在前面:在启动日志中没有看到Controller对应的URL被映射,那么请检查你的Controller是否被Spring管理了.此次踩坑就是忘了SpringBoot在没配置@Componen ...

  5. k8s实践 - 如何优雅地给kong网关配置证书和插件。

    前言 从去年上半年微服务项目上线以来,一直使用kong作为微服务API网关,整个项目完全部署于k8s,一路走来,对于k8s,对于kong,经历了一个从无到有,从0到1的过程,也遇到过了一些坎坷,今天准 ...

  6. 深入理解OkHttp源码（一）——提交请求

    本篇文章主要介绍OkHttp执行同步和异步请求的大体流程.主要流程如下图: 主要分析到getResponseWidthInterceptorChain方法,该方法为具体的根据请求获取响应部分,留着后面 ...

  7. 用node探究http缓存

    用node搞web服务和直接用tomcat.Apache做服务器不太一样, 很多工作都需要自己做.缓存策略也要自己选择,虽然有像koa-static,express.static这些东西可以用来管理静 ...

  8. Hyperledger Fabric、Corda和以太坊对比

     Hyperledger Fabric . Corda 和以太坊的对比 三种不同的框架 我们从 Hyperledger Fabric.R3 Corda和以太坊的白皮书中可以看到,三种框架在可能的应用领 ...

  9. Python猫荐书系列：文也深度学习，理也深度学习

    最近出了两件大新闻,相信大家可能有所耳闻. 我来当个播报员,给大家转述一下: 1.中国队在第 11 界罗马尼亚数学大师赛(RMM)中无缘金牌.该项赛事是三大国际赛事之一,被誉为中学奥数的最高难度.其中 ...

  10. 你需要知道的这几种 asp.net core 修改默认端口的方式

    一般情况下,aspnetcore发布后的默认端口是5000,这个大家都知道,而且默认骨架代码中没有看到任何让你输入的ip地址和端口号,但作为程序员的我们,不希望 被框架所管制,那如何实现默认端口的修改 ...