jQuery如何遍历获取到的json数据 + 实例

最新推荐文章于 2023-07-13 10:21:13 发布

原创最新推荐文章于 2023-07-13 10:21:13 发布 · 2.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery如何遍历获取到的json数据

json 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种前后端交互中常见的数据处理方式，通过Java后端生成并返回JSON数据，前端使用jQuery AJAX请求数据并进行遍历展示。文章详细展示了如何在后端创建并填充数据，以及在前端解析并利用这些数据。

在解决这个问题之前我们先要从前台取得json数据，至于怎么生成以及怎么获取数据，这里只做简单的解释，后台controller层的代码如下：

public class HelloMvcController {	
	@ResponseBody
	@RequestMapping("/mvc")
	public Map<String, Object> helloMvc() {
		
		user sUser=new user();
		user sUser2=new user();
		List<user > list=new ArrayList<user>();
		
		Map<String, Object> map=new HashMap<String, Object>();
		
		sUser.setName("aa");
		sUser.setSex("bb");
		sUser2.setName("cc");
		sUser2.setSex("dd");
		
		
		list.add(0, sUser);
		list.add(1, sUser2);

		map.put("sum", list.size());
		map.put("user", list);	
		return map;
	}

这里的user对象只有简单的两个属性，user类的代码如下：

public class user {
	
	
	private String name;
	private String sex;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getSex() {
		return sex;
	}
	public void setSex(String sex) {
		this.sex = sex;
	}
	

}

前台jsp获取数据的代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>

$(document).ready(function(){
	
	var value=6;
	var text="这是第二个";
	
	//典型的取出数据并遍历的例子
	
 	$.ajax(
	{
		  url:"http://localhost:8089/o2o/hello/mvc",
		  type:'post',
		  dataType : "json",
		  success:function(date){
		  alert(JSON.stringify(date));
			 //var dataObj = date;
			    var i=0; 
			    alert(date.sum);			    
			    $.each(date.user, function(idx, obj) {
			        alert(obj.name);
			        $("#province"). append("<option value="+value+">"+obj.name+"</option>");
			        
			    });
			    			  
		        },
		      error:function(error){
		 	   alert(error);
		      }
	}
	) 
	
});

</script>
</head>
<body>
<select class="selectpicker" title="请选择" id="province" name="city" >
<option value="8" select="selected">这是第一个</option>								    	
</select>							
</body>
</html>

前台页面只需要注意ajax部分，在遍历之前先看一下需要遍历的json数据的格式，格式如下：

我们遍历的时候是用的.each（）进行遍历的由于我们只需要user的数据所以遍历的时候传入的是date.user，idx是索引的位置，

然后用ojb.+key的方式遍历获得的json数据。好这种方式我们知道了，加入你不想遍历，想直接取某一条数据呢，可以，像这样

date.user[i].key的方式可以直接取到这条数据，在如果我们获取的json数据是一条最普通的json，如{"name":"aa"},获取数据可以直接使用date.key的方式来获取。这个格式跟我们获取list或者map里的数据有点像。以上就是使用json遍历的一点感想，这篇写的稍微有点乱，之后会附上源码。