qepipnu
- 浏览: 76382 次
- 性别:
- 来自: 广州
-
最新评论
-
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 1722正常的cookie只能在一个应用中共享，即一个cookie只能 ... -
JQuery中$.ajax()方法参数详解
2011-05-25 13:05 1657url: 要求为String类型的参数，（默认为当前页地址）发 ... -
jquery刷新页面
2011-04-27 23:51 956jquery刷新页面 局部刷新： 这个方法就多了去了，常见 ... -
spring MVC
2011-04-27 23:50 1515需要的JAR包有： spring2.jar cglib-nod ... -
Java hascode
2011-04-10 17:47 819java hascode Java中有两类集合(Colle ... -
spring原理
2011-04-10 00:03 8271、spring原理 s ... -
hibernate的缓存
2011-03-31 14:34 854缓存是介于应用程序和 ... -
Spring AOP之Hello World
2011-03-30 11:36 1007我们使用一个简单的例子来演示一下Spring中的AOP，这是一 ... -
数字推理题规律汇总
2011-03-29 16:48 1043□ 等差数列及其变式 【例题1】2，5，8，() A ... -
freemarker的模板标签获取
2011-03-28 13:23 1734In FreeMarker 2.2, Template has ... -
StringUtils函数全集
2011-01-13 16:45 1278StringUtils函数全集 Strin ... -
java - 删除文件
2010-12-30 13:32 1113java删除文件 package IO.file; impo ... -
jquery 赋值函数
2010-12-28 11:14 878$("")是一个jquery对象，而不是一 ... -
jQuery的鼠标事件
2010-12-28 11:13 1942鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。 ... -
获取鼠标在图片对象上的位置
2010-12-27 21:40 1193<!DOCTYPE HTML PUBLIC " ... -
window.opener 与 window.parent 的区别
2010-11-21 22:57 1023我们如果要用到iframe的值传到另一框架就要用到 windo ... -
几个常用代码在IE8和火狐下的对比
2010-11-19 14:44 9761、Input 有的浏览 ... -
window.open()运用
2010-11-18 17:24 1033window.open()支持环境： JavaScript1. ... -
java 环境变量
2010-05-06 10:34 2504电脑属性高级 > 环境变量 > 系统变量 > ... -
Cookie
2010-05-04 16:04 995把用户名写入Cookie String userName1 = ...
相关推荐
标题“jQuery+json+servlet 动态取后台数据”揭示了一个常见的Web开发场景，其中前端JavaScript库jQuery被用来从后端服务器（通过servlet）获取动态数据，这些数据以JSON（JavaScript Object Notation）格式传输。...
在这个"Java+Servlet+Jquery+Json基础示例"中，我们可以看到如何将这四种技术融合在一起创建一个Web应用。首先，用户通过前端界面（HTML+CSS+Jquery）发送Ajax请求，Jquery负责包装和发送这些请求，通常是以Json格式...
本项目使用Servlet、JSON、JavaScript（JQuery）和JSP技术实现了一个简单易懂、功能完善的分页解决方案。 **Servlet** 是Java服务器端编程的基础，它负责处理HTTP请求和响应。在分页应用中，Servlet主要负责接收...
在IT行业中，`jQuery`、`Ajax`、`JSON` 和 `Servlet` 是四个非常重要的技术，它们在构建现代Web应用程序中发挥着关键作用。让我们深入探讨这些技术及其相互之间的结合。 首先，`jQuery` 是一个高效、轻量级的...
【标题】：“jQuery + AJAX + JSON + Servlet 实例源码” 这个实例源码主要展示了如何在Web开发中利用jQuery库进行AJAX异步请求，与后台Servlet进行数据交互，并通过JSON格式来序列化和反序列化数据。这些技术是...
在这个项目中，"Ajax + jQuery + json + js + jsp + servlet 三级联动"是一个完整的解决方案，它涵盖了从前端到后端的数据通信和处理。 首先，让我们深入理解每个技术的作用： 1. **Ajax**（Asynchronous ...
标题中的“Jquery + servlet + JSON处理”是一个典型的Web开发技术组合，主要涉及前端与后端的数据交互。这里，jQuery是一个流行的JavaScript库，用于简化HTML文档遍历、事件处理、动画以及Ajax交互。Servlet是Java...
本教程将详细讲解如何利用JQuery、Servlet和JSON技术来实现这一功能。 首先，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在本示例中，JSON被...
通过这个例子，你可以学习到如何结合使用JSON、jQuery、Servlet和AJAX来构建一个动态、交互性强的Web应用，理解前后端通信的过程以及如何在客户端和服务器端之间有效地传递数据。同时，这也是实际开发中常见的一种...
### 使用jQuery、Ajax、JSP与Servlet实现二级级联菜单 #### 一、项目背景与技术栈概述 本文档将详细介绍如何使用jQuery、Ajax、JSP与Servlet来实现一个简单的二级级联菜单功能。该功能常见于许多Web应用程序中，如...
MySQL负责数据存储，JDBC和Servlet处理数据交互，Freemarker和ArtTemplate构建用户界面，jQuery增强用户体验，而JSON和百度地图API则提供了数据传输和地图服务。这个系统展示了Web开发中的典型技术栈，为类似应用...
Struts2、jQuery、JSON和List是Web开发中常见的技术栈，它们在构建动态、交互式的Web应用程序中扮演着重要角色。这篇博文可能是探讨如何在Struts2框架中结合jQuery和JSON来处理List类型的数据。 Struts2是一个流行...
Struts2、jQuery和JSON是Web开发中的三个关键组件，它们共同构成了高效、动态和交互式的用户界面。这里我们将深入探讨这三个技术，并结合实例来理解它们如何协同工作。 首先，Struts2是一个基于MVC（Model-View-...
本教程主要聚焦于如何利用JSP（JavaServer Pages）、jQuery和JSON（JavaScript Object Notation）来实现AJAX功能。 **JSP（JavaServer Pages）** JSP是Java的一种视图技术，用于生成动态网页。开发者可以在JSP页面...
这个项目涉及到前端与后端的交互，需要熟练掌握jQuery的DOM操作和Ajax请求，以及Java Servlet和JSON的使用。通过这个实践，开发者可以提升对前后端协同工作的理解，同时提高处理动态数据的能力。
根据提供的文件信息，我们可以深入探讨以下几个关键的知识点：jQuery、JSON、JSP 以及数据库的集成使用。这些技术经常被组合在一起实现动态网页应用，尤其是从前端与后端交互的角度来看。 ### 一、jQuery jQuery ...
标题 "struts2+spring+hibernate+jquery+dwr+json" 描述了一个集成的Web应用程序开发框架，其中包含了多个关键技术和库。这个框架旨在提高开发效率，提供灵活的数据管理，以及用户友好的前端交互。 1. Struts2：...
SpringMVC、jQuery、Ajax和JSON这四个技术的结合，为开发者提供了一种高效且灵活的方式来实现这一功能。接下来，我们将深入探讨这些技术以及它们如何协同工作。 SpringMVC是Spring框架的一部分，是一个强大的MVC...
### jQuery + Ajax + JSON 级联：深入解析与应用 在现代Web开发中，级联选择器（Cascade Selectors）是一种常见的用户界面设计模式，主要用于处理多层级的数据选择，如国家-省份-城市的选择。本文将深入探讨如何...
在"ajax+servlet+jquery+jsp示例"中，我们看到的是一个使用Ajax实现前后台交互的经典应用场景。 1. **jQuery的Ajax函数**：jQuery是一个流行的JavaScript库，它简化了JavaScript的许多操作，包括Ajax请求。在这个...