欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

___Html页面使用Ajax做数据显示

程序员文章站 2023-01-30 15:18:49
......

<!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>

上一篇： 一哥们儿给我介绍了个妹子

下一篇： 移动互联网发展迅速，为什么移动端网站还是极简主义？

推荐阅读