JQuery AJAX获取json数据小结

此处涉及到JAVA对象与json对象之间的转换，可参考：https://blog.csdn.net/qq_40348465/article/details/83796363

示例项目目录如下：

一、jQuery AJAX获取json对象数据

1. GetJsonData.java（后台返回json对象数据）

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		People people = new People("张三","男",18);
		//将java对象转化为json对象
		JSONObject jsonObject = JSONObject.fromObject(people);
		response.getWriter().print(jsonObject.toString());
	}

2.GetJsonTest.jsp（jQuery AJAX获取json数据并显示）

<%@ 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 type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
  $(function(){
	  var url="GetJsonData.do";
	  //使用AJAX来获得json数据
	  $.getJSON(url,function(data,status,xhr){
		  //取json的一个属性
		  //此处的data就是一个json对象
		  $("#jsondata").html("姓名："+data.name+"&nbsp性别："+data.sex+"&nbsp年龄："+data.age);
		  
		  //可用each遍历json的key和value
		  $.each(data,function(key,value){
			  alert(key+":"+value);
		  });
	  });
  });
</script>
</head>
<body>
 <div id="jsondata"></div>
</body>
</html>

二、jQuery AJAX获取json对象数组数据

1.GetJSONArrayData.java（后台返回json对象数组数据）

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		
		People people1 = new People("张三","男",18);
		People people2 = new People("李四","男",19);
		People people3 = new People("王五","男",20);
		List<People> objectArray = new ArrayList<People>();
		objectArray.add(people1);
		objectArray.add(people2);
		//由JAVA对象集合生成json对象数组
		JSONArray jsonArray = JSONArray.fromObject(objectArray);
		response.getWriter().write(jsonArray.toString());
	}

2.GetJsonArrayTest.jsp（jQuery AJAX获取json对象数组并显示）

<%@ 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 type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
  $(function(){
	  var url="GetJSONArrayData.do";
	  //jQuery.getJSON(url,data,success(data,status,xhr))
	  //url	必需。规定将请求发送的哪个 URL。
	  //data 可选。规定连同请求发送到服务器的数据。
	  //success(data,status,xhr)	可选。规定当请求成功时运行的函数。额外的参数：response - 包含来自请求的结果数据 ,status - 包含请求的状态,xhr - 包含 XMLHttpRequest 对象
	  $.getJSON(url,function(data,status,xhr){
		  //取json的一个属性
		  //此处的data就是一个json对象
		  $("#jsondata").html(data[1].name+"，"+data[1].sex+"，"+data[1].age);
		  
		  //可用each遍历jsonArray的index和jsonObject
		  $.each(data,function(key,value){
			 alert("第"+key+"个people的信息："+value.name+"，"+value.sex+"，"+value.age);
		  });
	  });
  });
</script>
</head>
<body>
 <div id="jsondata"></div>
</body>
</html>

JQuery AJAX获取json数据小结

猜你喜欢