Collection
Collection
一、实现思路：
1、首先获取查询按钮，并添加事件；获取文本框的查询内容；
2、用jQuery的ajax全局函数来实现对json文件数据的获取；
3、用each（）遍历json文件中的数据
二、事先准备好的json文件中数据如下：
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
{
"peter": "朱老师:明天是狗年,祝大家早日告别单身狗的生活",
"zhuge":"猪哥:祝php中文网的小伙伴们,双'蛋'快乐~~",
"tree": "小树老师: 祝每一位同学都能学有所有,早日成为一名合格的程序员"
}三、功能实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>jQuery实现简单的json查询功能</title>
<style>
body {
margin: 0;
padding: 0;
}
.body {
margin: 20px auto;
background-color: #EBEBEB;
width: 600px;
border-radius: 30px;
padding: 20px;
}
input{
margin-left: 10px;
}
</style>
</head>
<body>
<div class="body">
<h3>留言查询：</h3>
<p><label for="username">请输入用户名:</label><input type="text" id="username" name="username"></p>
<button>开始查询</button>
<div></div>
</div>
<script>
$('button').on('click',function () { //获取查询按钮，并添加点击事件
var username = $('input:text').val() //获取文本框填写的内容文本，并赋值给username
// alert($('input:text').val())
$.ajax({ //调用ajax这个全局函数
type: 'GET', //设置请求类型为GET
url: 'demo2.json', //请求的url，文件内容见下一代码块
data: {username: username}, //将文本框填写的内容赋给属性username，发送给服务器，会转成字符串，并添加到url后面进行发送：demo2.json?username=username
dataType: 'json', //设置数据类型，如果省略不写，则会根据http的meta自动判断或设置
success: function (data,status) { // data是从服务器响应返回的数据，status是从服务器响应返回的状态说明文本：success、erro、timeout
$.each(data,function (key,value) { //遍历所有的data
if(key == username){ //设置查询条件
$('div').html(value) //将符合条件的值放入占位符div，显示在页面中
}
})
}
})
})
</script>
</body>
</html>