JSON整合JS，JQuery实现数据获取及展示

本期博客我们重点介绍如何通过JS以及JQuery获取JSON数据并进行界面的展示，讲解从基础案例开始，逐次递进。

1. ajax传递及返回数据

我们新建一个JsonController类，通过定义一个User实体类，User类包含用户名、密码、手机号三个属性，这里我们为方便测试，就不连接数据库了，我们检验以下两种情况：
①传递非JSON数据，然后返回JSON数据；
②传递JSON数据，返回JSON数据。
首先是第一种，在JsonController类中定义如下方法，代码如下：

   /**
	 * 前台传递表单数据
	 */
	@RequestMapping("/jsonDemoTwo")
	@ResponseBody
	public User jsonDemoTwo(User user) throws Exception {
   
		System.out.println("前台获取的数据:"+user.toString());
		user = new User("传入非JSON数据","123","222");
		return user;
	}

通过添加注解@ResponseBody，表明返回JSON数据，而传入的user参数并没有任何注解绑定，所以传入非JSON数据。
然后我们新建json1.jsp，里面引入jquery.js文件，以便调用ajax函数，部分代码如下：

    //传非JSON,返回JSON
	function resJSON() {
   
		$.ajax({
   
			type:'post',
			url:'jsonDemoTwo.action',//请求的url地址,建议使用绝对地址
			data:'uName=刘&uPwd=123',//请求携带的参数
			success:function(data) {
   //sucess中function的data可以解析后台的数据
				console.log(data);
			},
			error:function() {
   //失败回调函数
				console.log("解析失败!");
			}
		});
	}

然后介绍第二种方式，在JsonController类中创建新的方法，代码如下：

    /**
	 * 传入参数被@RequestBody标识
	 */
	@RequestMapping("/jsonDemoThree")
	@ResponseBody
	public User jsonDemoThree(@RequestBody User user) throws Exception {
   
		System.out.println("前台获取的数据:"+user.toString());
		user = new User("传入JSON数据","123","222");
		return user;
	}

这里我们在参数user前面加上@RequestBody注解，表明传入JSON数据。
在json1.jsp中，ajax函数部分代码如下：

	//传JSON,返回JSON
	function req_resJSON() {
   
		$.ajax({
   
			type:'post',
			url:'jsonDemoThree.action',//请求的url地址,建议使用绝对地址
			contentType:'application/json;charset=utf-8',//设置请求参数类型
			data:'{"uName":"刘","uPwd":"123456"}',//请求携带的参数
			success:function(data) {
   //sucess中function的data可以解析后台的数据
				console.log(data);
			},
			error:function() {
   //失败回调函数
				console.log("解析失败!");
			}
		});
	}

这里ajax函数中加入了contentType属性，设置了请求参数类型为json形式。
其中json1.jsp中body内的代码如下：

<form action="${pageContext.request.contextPath}/jsonDemoTwo.action" method="post">
		<input type="text" name="uName" placeholder="请输入用户名"/><br/>
		<input type="password" name="uPwd" placeholder="请输入密码"/><br/>
		<input type="submit" value="提交">
	</form>
	<input type="button" value="传非JSON,返JSON" onclick="resJSON()"/><br/>
	<input type="button" value="均为JSON" onclick="req_resJSON()"/>

当我们点击不同的按钮时，其POST请求截图分别如下所示：

2.getJSON,each获取列表数据（js,jquery混用）

在JsonController类中我们新建jsonDemoList方法，代码如下：