ajax留言查询

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
		</style>
	</head>
	<body>
		<h1>圣诞节祝福语查询--小红、小明、小刚</h1>
		<p>
			<label for="userName">请输入用户名：</label>
			<input type="text" id="userName" name="userName" />
		</p>
		<button>查询</button>
		<div></div>

		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script>
			$('button').on('click',function() {
				//获取text值
				var userName = $('#userName').val();
				$.ajax({
					type:"get",
					url:"demo2.json",
					async:true,
					data: {userName:userName},
					dataType: 'json',
					success: function (data) {
						$.each(data, function (key, value) {  //遍历键值 和属性
							if (key == userName) {
								$('div').html(value);
							}
						})
					}
				});
			})
		</script>
	</body>
</html>

JSON:

{
  "xiaohong": "小红:圣诞节到了，悄悄的一条信息，带去我的一份最真的祝福，一份深情，一份情谊，一份如意，一份温馨，一份守望，一份牵挂，一份安康都给你。",
  "xiaoming":"小明:圣诞节到来的这天，圣诞老人巧遇财神爷，他们决定给看短信的人送出双份补贴。你除了能享受到平安夜的快乐温馨，还会在新年拥抱滚滚财源!",
  "xiaogang": "小刚: 圣诞节到来了，愿你幸福做加法，烦恼做减法，快乐做乘法，困难做除法，幸运开平方，霉运开根号，坏心情像小数点，好心情循环无极限。祝圣诞快乐!"
}

相关文章