Java Servlet生成JSON格式数据并用jQuery显示的方法

前端技术 2023/09/07 JSP

本文实例讲述了Java Servlet生成JSON格式数据并用jQuery显示的方法。分享给大家供大家参考,具体如下:

1、Servlet通过json-lib生成JSON格式的数据

import java.io.IOException;
import java.io.PrintWriter;
import java.util.*;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import json.Person;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
@WebServlet(\"/JSONServlet\")
public class JSONServlet extends HttpServlet {
public JSONServlet() {
super();
}
public void destroy() {
super.destroy(); // Just puts \"destroy\" string in log
// Put your code here
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType(\"application/x-json\");
response.setCharacterEncoding(\"GBK\");
PrintWriter out = response.getWriter();
ArrayList<Person> items=new ArrayList<Person>();
items.add(new Person(2,\"jack\"));
items.add(new Person(2,\"bob\"));
items.add(new Person(2,\"alex\"));
JSONArray jsonArray=new JSONArray();
jsonArray.addAll(items);
out.print(jsonArray.toString());
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
public void init() throws ServletException {
// Put your code here
}
}

2、前端页面代码

<%@ page language=\"java\" contentType=\"text/html; charset=ISO-8859-1\"
pageEncoding=\"ISO-8859-1\"%>
<!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=ISO-8859-1\">
<title>Insert title here</title>
<script type=\"text/javascript\" src=\"js/jquery-1.10.2.min.js\"></script>
<script type=\"text/javascript\">
$(document).ready(
function() {
$(\"#kick\").click(
function() {
$.ajax({
type : \"post\",//post方法
url : \"JSONServlet\",
data : {
\"legs\" : \"2\",
\"name\" : \"aa\"
},
//ajax成功的回调函数
success : function(returnData) {
var arr = eval(returnData);
$.each(arr, function(index, content) {
$(\"#result\").append(
\"<div>\" + content.legs
+ \"</div>\" + \"<div>\"
+ content.name
+ \"</div><hr/>\");
});
}
});
});
});
</script>
</head>
<body>
<input type=\"button\" id=\"kick\" value=\"kick\">
<div id=\"result\"></div>
</body>
</html>

jQuery也可以用.getJSON实现异步数据获取

<script type=\"text/javascript\">
$(document).ready(
function() {
$(\"#kick\").click(function() {
$.getJSON(\"JSONServlet\",function(returnData){
var arr = eval(returnData);
$(\"#result\").html(\"\");//清空info内容
$.each(arr, function(index, content) {
$(\"#result\").append(
\"<div>\" + content.legs
+ \"</div>\" + \"<div>\"
+ content.name
+ \"</div><hr/>\");
});
});
});
});
</script>

希望本文所述对大家JSP程序设计有所帮助。

本文地址:https://www.stayed.cn/item/18784

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。