查询所有
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查询所有用户</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<style>
p{
display: inline;
}
#id{
margin-left: 15px;
}
td,th{
border: solid black 1px;
}
html body {
margin:0px;padding:0px}
li{
display: inline;
margin-right:25px;
padding-top:15px!important;
}
ul{
margin-top:0px;
padding-top:12px;
}
#One{
margin-left:10%;
}
a{
font-size:25px
}
#CD{
height:60px;
background-color:blue;
}
a{
text-decoration:none
}
a a:link{
color:white;
}
a:visited{
color:white;
}
a:active{
color:white;
}
a:hover {
color:red;
}
#nr{
margin-top:5%;
margin-left:10%;}
</style>
<body>
<div id="CD">
<ul>
<li id="One"><a href="findAllUser.html" >查询所有</a></li>
<li><a href="findOneUser.html" >查询单个</a></li>
<li><a href="save.html" >增加</a></li>
<li><a href="update.html" >删除</a></li>
<li><a href="update.html" >修改</a></li>
</ul>
</div>
<div id="nr">
<h1>查询所有用户</h1>
<button>发送请求</button>
<table id="mytab" border="1">
<tr id="htr">
<th>#</th>
<th>名</th>
<th>姓</th>
<th>邮箱</th>
<th>手机号</th>
<th>生日</th>
</tr>
</table>
</div>
<script>
$(document).ready(function (){
$('button').on('click',function(){
var $tab1 = $("#mytab");
//alert(1);
//var $id=$('#id').val();
//var $username=$('#username').val();
//var $password=$('#password').val();
//var $age=$('#age').val();
$.ajax({
//alert(2);
url : "http://192.168.0.120:8080/customers",
type : 'GET',
dataType : 'json',
data:'',
// Jsonp: 'callback',
success : function(data) { // 数据状态success
$("#htr").nextAll().remove();
// alert(3);
console.log(data);
for(var i=0;i<data.length;i++){
$tab1.append("<tr><td>" + data[i].id + "</td><td>" + data[i].firstName + "</td><td>" + data[i].lastName + "</td><td>"+ data[i].email + "</td><td>"
+ data[i].mobile+ "</td><td>"
+ data[i].dateOfBirth + "</td></tr>" );
}
}
});
})
})
//
// _ooOoo_
// o8888888o
// 88" . "88
// (| -_- |)
// O\ = /O
// ____/`---'\____
// .' \\| |// `.
// / \\||| : |||// \
// / _||||| -:- |||||- \
// | | \\\ - /// | |
// | \_| ''\---/'' | |
// \ .-\__ `-` ___/-. /
// ___`. .' /--.--\ `. . __
// ."" '< `.___\_<|>_/___.' >'"".
// | | : `- \`.;`\ _ /`;.`/ - ` : | |
// \ \ `-. \_ __\ /__ _/ .-` / /
// ======`-.____`-.___\_____/___.-`____.-'======
// `=---='
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// 佛祖保佑 永无BUG
</script>
</body>
</html>
查询单个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查询单个用户</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head><style>
p{
display: inline;
}
#id{
margin-left: 15px;
}
td,th{
border: solid black 1px;
}
html body {
margin:0px;padding:0px}
li{
display: inline;
margin-right:25px;
padding-top:15px!important;
}
ul{
margin-top:0px;
padding-top:12px;
}
#One{
margin-left:10%;
}
a{
font-size:25px
}
#CD{
height:60px;
background-color:blue;
}
a{
text-decoration:none
}
a a:link{
color:white;
}
a:visited{
color:white;
}
a:active{
color:white;
}
a:hover {
color:red;
}
#nr{
margin-top:5%;
margin-left:10%;}
</style>
<body>
<div id="CD">
<ul>
<li id="One"><a href="findAllUser.html" >查询所有</a></li>
<li><a href="findOneUser.html" >查询单个</a></li>
<li><a href="save.html" >增加</a></li>
<li><a href="update.html" >删除</a></li>
<li><a href="update.html" >修改</a></li>
</ul>
</div>
<div id="nr">
<h1>查询所有用户</h1>
<p>按ID查询</p>
<input type="text" name="text" id="id">
<br>
<p>按名称查询</p>
<input type="text" name="text" id="firstName">
<br>
<br>
<button>发送请求</button>
<br>
<br>
<table id="mytab" border="1">
<tr id="htr">
<th>#</th>
<th>名</th>
<th>姓</th>
<th>邮箱</th>
<th>手机号</th>
<th>生日</th>
</tr>
</table>
</div>
<script>
$(document).ready(function() {
$('button').on('click',function() {
if($id === null){
}
var $id = $('#id').val();
var $firstName = $('#firstName').val();
if ($id !== null) {
params = {
"id" : $id
};
alert($id);
}
$.ajax({
url : "http://192.168.0.120:8080/customers/" + $id,
type : 'GET',
dataType : 'json',
data : params,
success : function(data) { // 数据状态success
console.log(data);
$("#htr").nextAll().remove();
alert(data.id);
if(data.id!=undefined){
$("#mytab").append("<tr><td>"+data.id+"</td><td>"+data.firstName+"</td><td>"+data.lastName+"</td><td>"+data.email+"</td><td>"+data.mobile+"</td><td>"+data.dateOfBirth+"</tr>");
}
}
});
})
})
</script>
<script>
$(document).ready(function() {
$('button').on('click',function() {
var $id = $('#id').val();
var $firstName = $('#firstName').val();
var params;
if ($firstName !== null) {
params = {
"firstName" : $firstName
};
alert($firstName);
}
$.ajax({
url : "http://192.168.0.120:8080/" + $firstName,
type : 'GET',
dataType : 'json',
data : params,
success : function(data) { // 数据状态success
$("#htr").nextAll().remove();
console.log(data);
$("#mytab").append("<tr><td>"+data.id+"</td><td>"+data.firstName+"</td><td>"+data.lastName+"</td><td>"+data.email+"</td><td>"+data.mobile+"</td><td>"+data.dateOfBirth+"</tr>");
}
});
})
})
</script>
</body>
</html>
