console
$(function() {
function query() {
var val = $("#input").val().trim();
if (!val) return;
$.get('http://express.tanzk.com/query', {
key: val
}).then(function(ret) {
if (!ret.length) {
alert("没有查询结果，请确定信息是否有误");
return;
}
var html = ret.map(function(item) {
return "<tr><td>" + item.name + "</td><td>" + item.phone + "</td><td>" + item.expressOrder + "</td></tr>"
}).join("");
$(".table").show();
$("#tbody").html(html);
}).fail(function(){
alert("查询失败，请联系老师")()
})
}
$('#query').click(query)
$('#input').keypress(function(e){
if(e.keyCode === 13)query()
})
})()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no,user-scalable=0"
/>
<title>
订单查询
</title>
<style>
.table{ display:none; }
</style>
</head>
<body>
<div class="row">
<div class="col-lg-12">
<div class="input-group">
<input type="text" class="form-control" id="input" placeholder="输入姓名或手机号查询订单">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" id="query">
查询
</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table class="table">
<caption>
查询结果
</caption>
<thead>
<tr>
<th>
姓名
</th>
<th>
电话
</th>
<th>
订单号
</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>
Mark
</td>
<td>
Otto
</td>
<td>
@mdo
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
()