jquery+json+servlet
jquery+json小例子
使用jquery发送请求到servlet，返回json字符串，然后在前台解析json并显示
后台servlet的请求处理（需要引入json.jar）：
Java代码
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;
import org.json.JSONObject;
public class JsonViewServlet extends HttpServlet {
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req,resp);
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setContentType("text/html;charset=UTF-8");
resp.setHeader("Cache-Control","no-cache");
JSONObject json = new JSONObject();
try{
JSONArray members = new JSONArray();
for(int i=0;i<10;i++){
JSONObject member = new JSONObject()
.put("name", "张小"+i)
.put("age", "28")
.put("email", "[email protected]");
members.put(i, member);
}
json.put("jobs", members);
}catch(Exception e){
e.printStackTrace();
}
System.out.println(json.toString());
resp.getWriter().write(json.toString());
}
}
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;
import org.json.JSONObject;
public class JsonViewServlet extends HttpServlet {
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp); }
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=UTF-8");
resp.setHeader("Cache-Control","no-cache");
JSONObject json = new JSONObject();
try{
JSONArray members = new JSONArray();
for(int i=0;i<10;i++){
JSONObject member = new JSONObject().put("name", "张小"+i).put("age", "28").put("email", "[email protected]");
members.put(i, member);
}
json.put("jobs", members);
}catch(Exception e){ e.printStackTrace(); }
System.out.println(json.toString());
resp.getWriter().write(json.toString()); } }
通过上面代码，将向页面发送下面字符串：
Html代码
{"jobs":[
{"age":"28","email":"[email protected]","name":" 张小0"},
{"age":"28","email":"[email protected]","name":" 张小1"},
{"age":"28","email":"[email protected]","name":" 张小2"},
{"age":"28","email":"[email protected]","name":" 张小3"},
{"age":"28","email":"[email protected]","name":" 张小4"},
{"age":"28","email":"[email protected]","name":" 张小5"},
{"age":"28","email":"[email protected]","name":" 张小6"},
{"age":"28","email":"[email protected]","name":" 张小7"},
{"age":"28","email":"[email protected]","name":" 张小8"},
{"age":"28","email":"[email protected]","name":" 张小9"}
]}
{"jobs":[ {"age":"28","email":"[email protected]","name":"张小0"}, {"age":"28","email":"[email protected]","name":"张小1"}, {"age":"28","email":"[email protected]","name":"张小2"}, {"age":"28","email":"[email protected]","name":"张小3"}, {"age":"28","email":"[email protected]","name":"张小4"}, {"age":"28","email":"[email protected]","name":"张小5"}, {"age":"28","email":"[email protected]","name":"张小6"}, {"age":"28","email":"[email protected]","name":"张小7"}, {"age":"28","email":"[email protected]","name":"张小8"}, {"age":"28","email":"[email protected]","name":"张小9"} ]}
前台页面（需要引入jquery.js和json.js）：
Jsp代码
<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<title> 使用jquery ajax显示JSON数据</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" src="../jslib/jquery.js"></script>
<script language="javascript" src="../jslib/json.js"></script>
</head>
<body>
<h1>JSON 数据显示.</h1>
<input type="button" value="JsonView" onClick="jsonview();">
<div id="dateMessage">
<table id="planTable">
<tr><td> 名称</td><td>年龄</td><td>邮箱</td></tr>
</table>
</div>
</body>
</html>
<script language="javascript">
function jsonview(){
$.getJSON("http://localhost:8080/ajaxServlet/servlet/jsonViewServlet",null,function call(data){
wirteHtml(data);
});}
function wirteHtml(data){
//alert(data.toJSONString());
//alert(data.jobs); //返回的data就是一个JSON的对象
var continents = data.jobs;
for(var i=0;i<continents.length;i++){
//alert(continents[i].name);
var newLine = $("#planTable").length;
var row = planTable.insertRow(newLine);
var col = row.insertCell(0);
col.innerHTML = continents[i].name;
col = row.insertCell(1);
col.innerHTML = continents[i].age;
col = row.insertCell(2);
col.innerHTML = continents[i].email;
}
}
</script>
<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<title>使用jquery ajax显示JSON数据</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" src="../jslib/jquery.js"></script>
<script language="javascript" src="../jslib/json.js"></script>
</head>
<body>
<h1>JSON数据显示.</h1>
<input type="button" value="JsonView" onClick="jsonview();">
<div id="dateMessage">
<table id="planTable">
<tr><td>名称</td><td>年龄</td><td>邮箱</td></tr>
</table>
</div>
</body>
</html>
<script language="javascript">
function jsonview(){
$.getJSON("http://localhost:8080/ajaxServlet/servlet/jsonViewServlet",null,function call(data){
wirteHtml(data); });
}
function wirteHtml(data){
//alert(data.toJSONString());
//alert(data.jobs);
//返回的data就是一个JSON的对象
var continents = data.jobs;
for(var i=0;i<continents.length;i++){
//alert(continents[i].name);
var newLine = $("#planTable").length;
var row = planTable.insertRow(newLine);
var col = row.insertCell(0);
col.innerHTML = continents[i].name;
col = row.insertCell(1);
col.innerHTML = continents[i].age;
col = row.insertCell(2);
col.innerHTML = continents[i].email;
} }
</script>
WEB.XML配置
Xml代码
<!-- jsonView servlet -->
<servlet>
<servlet-name>jsonViewServlet</servlet-name>
<servlet-class>com.arthurs.json.JsonViewServlet</servlet-class>
</servlet>
<!-- jsonView mapping -->
<servlet-mapping>
<servlet-name>jsonViewServlet</servlet-name>
<url-pattern>/servlet/jsonViewServlet</url-pattern>
</servlet-mapping>
<!-- jsonView servlet --> <servlet> <servlet-name>jsonViewServlet</servlet-name> <servlet-class>com.arthurs.json.JsonViewServlet</servlet-class> </servlet> <!-- jsonView mapping --> <servlet-mapping> <servlet-name>jsonViewServlet</servlet-name> <url-pattern>/servlet/jsonViewServlet</url-pattern> </servlet-mapping>
使用jquery发送请求到servlet，返回json字符串，然后在前台解析json并显示
后台servlet的请求处理（需要引入json.jar）：
Java代码
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;
import org.json.JSONObject;
public class JsonViewServlet extends HttpServlet {
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req,resp);
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setContentType("text/html;charset=UTF-8");
resp.setHeader("Cache-Control","no-cache");
JSONObject json = new JSONObject();
try{
JSONArray members = new JSONArray();
for(int i=0;i<10;i++){
JSONObject member = new JSONObject()
.put("name", "张小"+i)
.put("age", "28")
.put("email", "[email protected]");
members.put(i, member);
}
json.put("jobs", members);
}catch(Exception e){
e.printStackTrace();
}
System.out.println(json.toString());
resp.getWriter().write(json.toString());
}
}
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;
import org.json.JSONObject;
public class JsonViewServlet extends HttpServlet {
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp); }
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=UTF-8");
resp.setHeader("Cache-Control","no-cache");
JSONObject json = new JSONObject();
try{
JSONArray members = new JSONArray();
for(int i=0;i<10;i++){
JSONObject member = new JSONObject().put("name", "张小"+i).put("age", "28").put("email", "[email protected]");
members.put(i, member);
}
json.put("jobs", members);
}catch(Exception e){ e.printStackTrace(); }
System.out.println(json.toString());
resp.getWriter().write(json.toString()); } }
通过上面代码，将向页面发送下面字符串：
Html代码
{"jobs":[
{"age":"28","email":"[email protected]","name":" 张小0"},
{"age":"28","email":"[email protected]","name":" 张小1"},
{"age":"28","email":"[email protected]","name":" 张小2"},
{"age":"28","email":"[email protected]","name":" 张小3"},
{"age":"28","email":"[email protected]","name":" 张小4"},
{"age":"28","email":"[email protected]","name":" 张小5"},
{"age":"28","email":"[email protected]","name":" 张小6"},
{"age":"28","email":"[email protected]","name":" 张小7"},
{"age":"28","email":"[email protected]","name":" 张小8"},
{"age":"28","email":"[email protected]","name":" 张小9"}
]}
{"jobs":[ {"age":"28","email":"[email protected]","name":"张小0"}, {"age":"28","email":"[email protected]","name":"张小1"}, {"age":"28","email":"[email protected]","name":"张小2"}, {"age":"28","email":"[email protected]","name":"张小3"}, {"age":"28","email":"[email protected]","name":"张小4"}, {"age":"28","email":"[email protected]","name":"张小5"}, {"age":"28","email":"[email protected]","name":"张小6"}, {"age":"28","email":"[email protected]","name":"张小7"}, {"age":"28","email":"[email protected]","name":"张小8"}, {"age":"28","email":"[email protected]","name":"张小9"} ]}
前台页面（需要引入jquery.js和json.js）：
Jsp代码
<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<title> 使用jquery ajax显示JSON数据</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" src="../jslib/jquery.js"></script>
<script language="javascript" src="../jslib/json.js"></script>
</head>
<body>
<h1>JSON 数据显示.</h1>
<input type="button" value="JsonView" onClick="jsonview();">
<div id="dateMessage">
<table id="planTable">
<tr><td> 名称</td><td>年龄</td><td>邮箱</td></tr>
</table>
</div>
</body>
</html>
<script language="javascript">
function jsonview(){
$.getJSON("http://localhost:8080/ajaxServlet/servlet/jsonViewServlet",null,function call(data){
wirteHtml(data);
});}
function wirteHtml(data){
//alert(data.toJSONString());
//alert(data.jobs); //返回的data就是一个JSON的对象
var continents = data.jobs;
for(var i=0;i<continents.length;i++){
//alert(continents[i].name);
var newLine = $("#planTable").length;
var row = planTable.insertRow(newLine);
var col = row.insertCell(0);
col.innerHTML = continents[i].name;
col = row.insertCell(1);
col.innerHTML = continents[i].age;
col = row.insertCell(2);
col.innerHTML = continents[i].email;
}
}
</script>
<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<title>使用jquery ajax显示JSON数据</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" src="../jslib/jquery.js"></script>
<script language="javascript" src="../jslib/json.js"></script>
</head>
<body>
<h1>JSON数据显示.</h1>
<input type="button" value="JsonView" onClick="jsonview();">
<div id="dateMessage">
<table id="planTable">
<tr><td>名称</td><td>年龄</td><td>邮箱</td></tr>
</table>
</div>
</body>
</html>
<script language="javascript">
function jsonview(){
$.getJSON("http://localhost:8080/ajaxServlet/servlet/jsonViewServlet",null,function call(data){
wirteHtml(data); });
}
function wirteHtml(data){
//alert(data.toJSONString());
//alert(data.jobs);
//返回的data就是一个JSON的对象
var continents = data.jobs;
for(var i=0;i<continents.length;i++){
//alert(continents[i].name);
var newLine = $("#planTable").length;
var row = planTable.insertRow(newLine);
var col = row.insertCell(0);
col.innerHTML = continents[i].name;
col = row.insertCell(1);
col.innerHTML = continents[i].age;
col = row.insertCell(2);
col.innerHTML = continents[i].email;
} }
</script>
WEB.XML配置
Xml代码
<!-- jsonView servlet -->
<servlet>
<servlet-name>jsonViewServlet</servlet-name>
<servlet-class>com.arthurs.json.JsonViewServlet</servlet-class>
</servlet>
<!-- jsonView mapping -->
<servlet-mapping>
<servlet-name>jsonViewServlet</servlet-name>
<url-pattern>/servlet/jsonViewServlet</url-pattern>
</servlet-mapping>
<!-- jsonView servlet --> <servlet> <servlet-name>jsonViewServlet</servlet-name> <servlet-class>com.arthurs.json.JsonViewServlet</servlet-class> </servlet> <!-- jsonView mapping --> <servlet-mapping> <servlet-name>jsonViewServlet</servlet-name> <url-pattern>/servlet/jsonViewServlet</url-pattern> </servlet-mapping>