自己服务器搭建的演示地址：http://116.196.116.164/work/daili.html
输入123 456 789 会有相关提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>授权代理商查询</title>
<script src="http://116.196.116.164/work/jquery-3.2.1.js"></script>
<style>
* {
margin: 0;
padding: 0;
background-image: url("http://116.196.116.164/work/bg.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
}
.header{
width: 280px;
padding-left: 480px;
padding-top: 100px;
}
.search{
width: 350px;
padding-left: 540px;
padding-top: 50px;
}
#phoneNumber{
border: 1px solid #d5d9da;
border-radius: 5px;
box-shadow: 0 0 5px #e8e9eb inset;
width: 200px;
font-size: 1.1em;
outline: 0;
margin-bottom: 5px;
}
.search p {
font-size: 1.3em;
color: floralwhite;
font-weight: bolder;
}
button{
color: lightgoldenrodyellow;
border-radius: 10px;
width: 50px;
height: 40px;
}
button:hover{
color: #0a6999;
}
.result{
width: 350px;
padding-left: 540px;
padding-top: 50px;
}
h1{
color: white;
}
h1:hover{
color: #00CC66;
}
</style>
</head>
<body>
<div>
<div class="header">
<img src="agent_logo.png" alt="">
</div>
<div class="search">
<p><label for="phoneNumber">电 话:</label><input type="text" id="phoneNumber" name="phoneNumber" placeholder="请输入电话号码"> <button>查询</button></p>
</div>
<div class="result">
<h1></h1>
</div>
</div>
<script>
$('button').on('click',function () {
var phoneNumber =$('input:text').val()
$.ajax({
type:'Get',
url:'package.json',
data:{phoneNumber:phoneNumber},
dataType:'json',
success:function (data) {
$.each(data,function (key, value) {
if (key == phoneNumber) {
$('h1').html(value)
}
})
}
})
})
</script>
</body>
</html>JSON文件
{
"123": "恭喜，您是金牌代理商",
"456": "恭喜，您是银牌代理商",
"789": "恭喜，您是铜牌代理商"
}