版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_40348465/article/details/84592443
此处涉及到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+" 性别:"+data.sex+" 年龄:"+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>