<!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. css中常见margin塌陷问题之解决办法

    塌陷问题 当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象. ①垂直并列 首先设置两个DIV,并为其制定宽高 1 /*HTML部分*/ 2 <body> 3 <d ...

  2. Vue学习小结(二)

    接上一批,小结(二). 三.导航内容(含左侧导航及顶部面包屑导航) 其实导航条主要根据element-ui的教程进行编写,官网:http://element-ui.cn/#/zh-CN/compone ...

  3. Shim 与 Polyfill

    Shim: 用来向后兼容.比如 requestIdleCallback,为了在旧的环境中不报错,可以加 shim. 使用环境中现有的 api 来实现,不会引入额外的依赖或其他技术. Polyfill: ...

  4. 一文快速了解MaxCompute

    很多刚初次接触MaxCompute的用户,面对繁多的产品文档内容以及社区文章,往往很难快速.全面了解MaxCompute产品全貌.同时,很多拥有大数据开发经验的开发者,也希望能够结合自身的背景知识,将 ...

  5. Spring Cloud Alibaba基础教程：Nacos的集群部署

    继续说说生产环境的Nacos搭建,通过上一篇<Spring Cloud Alibaba基础教程:Nacos的数据持久化>的介绍,我们已经知道Nacos对配置信息的存储原理,在集群搭建的时候 ...

  6. Java设置PDF有序、无序列表

    文档中的设置有序或无序列表是一种反应内容上下级关系或者内容相同属性的方式,与单纯的文字叙述相比,它能有效增强文档内容的条理性,突出重点.因此,本文将分享通过Java编程在PDF文档中设置有序或无序列表 ...

  7. DataPipeline丨瓜子二手车基于Kafka的结构化数据流

    文 |彭超 瓜子大数据架构师 交流微信 | datapipeline2018 一.为什么选择Kafka   为什么选Kafka?鉴于庞大的数据量,需要将其做成分布式,这时需要将Q里面的数据分到许多机器 ...

  8. php7连接mysql测试代码

    php7连接mysql测试代码 <?php $mysqli = new mysqli("localhost", "root", "passwor ...

  9. 【原】无脑操作：Chrome浏览器安装Vue.js devtool

    学习Vue.js时,Chrome浏览器安装Vue.js devtool能很方便的查看Vue对象.组件.事件等. 本文以Chrome浏览器插件Vue.js devtools_3.1.2_0.crx的安装 ...

  10. 在docker私有仓库如何查看有哪些镜像？

    搭建了docker私有仓库,上传了一些镜像,时间长了就会忘了有哪些镜像,在网上查了,有大佬是通过脚本查看的,多厉害! #!/usr/bin/env python#-*- coding:utf-8 -* ...