JavaサーブレットJSON形式データを生成しjQueryで表示する方法
3370 ワード
この例では、JavaサーブレットがJSON形式のデータを生成し、jQueryで表示する方法について説明します.皆さんの参考にしてください.具体的には以下の通りです.
1、サーブレットはjson-libでJSON形式のデータを生成する
2、フロントエンドページコード
本文で述べたことが皆さんのJSPプログラム設計に役立つことを願っています.
1、サーブレットは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 items=new ArrayList();
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、フロントエンドページコード
Insert title here $(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/>"); }); } }); }); });
jQuery也可以用.getJSON实现异步数据获取
$(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/>");
});
});
});
});
本文で述べたことが皆さんのJSPプログラム設計に役立つことを願っています.