qepipnu
- 浏览: 74607 次
- 性别:
- 来自: 广州
-
最新评论
-
wayilau：
第24条，是不是有问题呀。。。
教你认人 -
xiaoBaoProgramme：
很好的一篇文章，顶。
html页面嵌套html页面 -
JUnique：
...
SSH -
yihuijie2011：
...
SSH -
linpark：
没事来看看~
SSH
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", "test@test.com");
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", "test@test.com");
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":"test@test.com","name":" 张小0"},
{"age":"28","email":"test@test.com","name":" 张小1"},
{"age":"28","email":"test@test.com","name":" 张小2"},
{"age":"28","email":"test@test.com","name":" 张小3"},
{"age":"28","email":"test@test.com","name":" 张小4"},
{"age":"28","email":"test@test.com","name":" 张小5"},
{"age":"28","email":"test@test.com","name":" 张小6"},
{"age":"28","email":"test@test.com","name":" 张小7"},
{"age":"28","email":"test@test.com","name":" 张小8"},
{"age":"28","email":"test@test.com","name":" 张小9"}
]}
{"jobs":[ {"age":"28","email":"test@test.com","name":"张小0"}, {"age":"28","email":"test@test.com","name":"张小1"}, {"age":"28","email":"test@test.com","name":"张小2"}, {"age":"28","email":"test@test.com","name":"张小3"}, {"age":"28","email":"test@test.com","name":"张小4"}, {"age":"28","email":"test@test.com","name":"张小5"}, {"age":"28","email":"test@test.com","name":"张小6"}, {"age":"28","email":"test@test.com","name":"张小7"}, {"age":"28","email":"test@test.com","name":"张小8"}, {"age":"28","email":"test@test.com","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", "test@test.com");
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", "test@test.com");
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":"test@test.com","name":" 张小0"},
{"age":"28","email":"test@test.com","name":" 张小1"},
{"age":"28","email":"test@test.com","name":" 张小2"},
{"age":"28","email":"test@test.com","name":" 张小3"},
{"age":"28","email":"test@test.com","name":" 张小4"},
{"age":"28","email":"test@test.com","name":" 张小5"},
{"age":"28","email":"test@test.com","name":" 张小6"},
{"age":"28","email":"test@test.com","name":" 张小7"},
{"age":"28","email":"test@test.com","name":" 张小8"},
{"age":"28","email":"test@test.com","name":" 张小9"}
]}
{"jobs":[ {"age":"28","email":"test@test.com","name":"张小0"}, {"age":"28","email":"test@test.com","name":"张小1"}, {"age":"28","email":"test@test.com","name":"张小2"}, {"age":"28","email":"test@test.com","name":"张小3"}, {"age":"28","email":"test@test.com","name":"张小4"}, {"age":"28","email":"test@test.com","name":"张小5"}, {"age":"28","email":"test@test.com","name":"张小6"}, {"age":"28","email":"test@test.com","name":"张小7"}, {"age":"28","email":"test@test.com","name":"张小8"}, {"age":"28","email":"test@test.com","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>
分享到：
发表评论
-
Cookie跨域 cas
2011-10-27 17:30 1680正常的cookie只能在一个应用中共享，即一个cookie只能 ... -
JQuery中$.ajax()方法参数详解
2011-05-25 13:05 1628url: 要求为String类型的参数，（默认为当前页地址）发 ... -
jquery刷新页面
2011-04-27 23:51 926jquery刷新页面 局部刷新： 这个方法就多了去了，常见 ... -
spring MVC
2011-04-27 23:50 1489需要的JAR包有： spring2.jar cglib-nod ... -
Java hascode
2011-04-10 17:47 786java hascode Java中有两类集合(Colle ... -
spring原理
2011-04-10 00:03 7941、spring原理 s ... -
hibernate的缓存
2011-03-31 14:34 827缓存是介于应用程序和 ... -
Spring AOP之Hello World
2011-03-30 11:36 965我们使用一个简单的例子来演示一下Spring中的AOP，这是一 ... -
数字推理题规律汇总
2011-03-29 16:48 1011□ 等差数列及其变式 【例题1】2，5，8，() A ... -
freemarker的模板标签获取
2011-03-28 13:23 1691In FreeMarker 2.2, Template has ... -
StringUtils函数全集
2011-01-13 16:45 1204StringUtils函数全集 Strin ... -
java - 删除文件
2010-12-30 13:32 1077java删除文件 package IO.file; impo ... -
jquery 赋值函数
2010-12-28 11:14 833$("")是一个jquery对象，而不是一 ... -
jQuery的鼠标事件
2010-12-28 11:13 1917鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。 ... -
获取鼠标在图片对象上的位置
2010-12-27 21:40 1158<!DOCTYPE HTML PUBLIC " ... -
window.opener 与 window.parent 的区别
2010-11-21 22:57 995我们如果要用到iframe的值传到另一框架就要用到 windo ... -
几个常用代码在IE8和火狐下的对比
2010-11-19 14:44 9451、Input 有的浏览 ... -
window.open()运用
2010-11-18 17:24 989window.open()支持环境： JavaScript1. ... -
java 环境变量
2010-05-06 10:34 2469电脑属性高级 > 环境变量 > 系统变量 > ... -
Cookie
2010-05-04 16:04 975把用户名写入Cookie String userName1 = ...
相关推荐
Java+Servlet+Jquery+Json基础示例
Jquery+ajax+json+servlet
Servlet+jsp+js(Jquery)+json实现分页，自己写的，比较完美的分页！！so easy 不像网上写的那么复杂！代码容易理解！思路清晰！有需要的童鞋可以拿去看看。
JSON JQuery + Servlet +Json实现下拉框级联 json-lib-2.4-jdk15.jar所依赖jar的整理整理
NULL 博文链接：https://cxl2012.iteye.com/blog/1551273
公交线路搜索系统，mysql+jdbc+servlet+freemarker+json+jquery+arttemplate+百度地图api
利用jQuery+Ajax+json从数据库获取数据，将获取的数据利用json格式传递，实现select控件三级联动;内附数据库sql脚本。
JSON+Jquery+servlet+jsp+ajax例子,方便学习的人。
jquery下的ajax向后台servlet传输数据并从后台获得数据源码实例且有详细注释
NULL 博文链接：https://lw671579557.iteye.com/blog/1897568
News:新闻发布系统，新闻后台管理BootStrap + Jsp + Servlet + Jdbc + Mysql + Jquery + Ajax
Servlet利用Ajax,JQuery交互Json
从后台取出json数据，然后以table的形式展出。包含序号，名字，年龄。如1，张三，22。一共两行数据。
学习JSON 的同学们快来哟学习JSON 的同学们快来哟学习JSON 的同学们快来哟
前台使用简单的jquery技术，后台采用servlet，使用json方式进行数据的传输
ssh+jquery+servlet+json+dwr+ajax 数据库可配置。默认mysql。运行先改jdbc.properties和hibernate.cfg.xml里面的数据库配置！数据库最好事先存在。 再运行test包的testCreateDB-》testData(插入数据！)即可...
jquery ajax servlet json简单demo
JQuery getJSON() 调用Servlet简单例子
ssh+jquery+servlet+json+dwr+ajax....... 数据库可配置。默认mysql。运行先改jdbc.properties和hibernate.cfg.xml里面的数据库配置！数据库最好事先存在。 再运行test包的testCreateDB-》testData(插入数据！)...