___Html页面使用Ajax做数据显示
<!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>
上一篇： C#.NET优化