1、引入jar包：gson-1.7.1（google提供的json解决方案），下载网站：http://code.google.com/p/google-gson/
2、引入jQuery的js包
3、代码
1）
客户端代码（jsp代码）
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'json.jsp' starting page</title>
<!-- 去除浏览器缓存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<script type="text/javascript" src="scripts/jquery-1.6.1.js"></script>
<!-- -->
<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function() {
$.post(
"JsonServlet",
{"name":"张三"},
function(Date){
//alert(Date);
var html = "<table><tr><th>id</th><th>name</th><th>age</th><th>address</th><tr><td>"+Date.id+"</td><td>"+Date.name+"</td><td>"+Date.age+"</td><td>"+Date.address+"</td></tr></table>";
$("#show").html(html);
},
"json"
);
});
});
</script>
</head>
<body>
<input id="btn1" type="button" value="click me" />
<div id="show"></div>
</body>
</html>
2）服务器端代码（实体类Person）
package com.yjw.pojo;
public class Person {
private int id;
private String name;
private int age;
private String address;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
}
3）服务器端代码（servlet代码）
package com.yjw.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import com.yjw.pojo.Person;
public class JsonServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
Person person = new Person();
person.setId(1);
person.setName("张三");
person.setAge(20);
person.setAddress("suzhou");
Gson gson = new Gson();
String result = gson.toJson(person);
//System.out.println(result);
//服务器返回类型设置为json格式
resp.setContentType("application/json; charset=utf-8");
//清缓存
resp.setHeader("pragma", "no-cache");
resp.setHeader("cache-control", "no-cache");
//服务器响应
PrintWriter out = resp.getWriter();
out.print(result);
out.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
this.doGet(req, resp);
}
}
4）web.xml配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name></display-name>
<!-- Servlet在web.xml中的配置 -->
<servlet>
<servlet-name>JsonServlet</servlet-name>
<servlet-class>com.yjw.servlet.JsonServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>JsonServlet</servlet-name>
<url-pattern>/JsonServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
分享到：
相关推荐
通过这个例子，你可以学习到如何结合使用JSON、jQuery、Servlet和AJAX来构建一个动态、交互性强的Web应用，理解前后端通信的过程以及如何在客户端和服务器端之间有效地传递数据。同时，这也是实际开发中常见的一种...
这个例子中，前端通过Ajax向服务器的'/api/data'路径发送GET请求，期望返回JSON数据。当请求成功时，将在页面上显示接收到的message字段的值。 总的来说，SpringMVC、jQuery、Ajax和JSON的结合，为Web应用提供了一...
Struts2、jQuery、Ajax和Servlet是Web开发中常见的技术栈，它们共同构建了动态、交互式的用户界面。本文将详细解析这些技术及其在给定示例中的应用。 首先，Struts2是一个基于MVC（Model-View-Controller）设计模式...
在本示例中，我们探讨的是如何利用EasyUI前端框架，结合Ajax、JSON以及Servlet技术来构建一个用户登录注册的简单动态网页应用。这个“easyui+ajax+json+servlet实现用户登录注册简单demo”旨在为初学者提供一个理解...
本例子基于jQuery库和Servlet技术实现了一个自动补全功能，旨在帮助用户更高效地输入信息。 **jQuery简介** jQuery是一款广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。jQuery...
在这个例子中，我们将深入探讨如何使用jQuery的`getJSON()`函数与Servlet进行交互。 首先，我们来看`getJSON()`的基本用法。`getJSON()`接收三个参数：URL，数据（可选），以及一个回调函数。当服务器返回JSON数据...
3. **使用AJAX**：在前端，使用JavaScript和jQuery库发送AJAX请求到服务器，获取JSON数据。例如： ```javascript $.ajax({ url: 'StrutsAjax/ajaxAction', type: 'POST', dataType: 'json', success: function...
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它采用完全独立于语言的文本格式，但也使用了类似于C风格的语言（包括C、C++、C#、Java、JavaScript、Perl、Python等）的习惯，这使得JSON成为理想...
在这个例子中，Servlet接收来自Ajax请求的数据，可能对数据库进行查询，然后将结果封装成JSON格式的数据响应给客户端。 3. **JSON数据格式**：JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于...
在这个例子中，Servlet会创建一个JSONArray对象，将获取到的一级选项数据填充进去，然后使用`response.getWriter().write()`将JSON字符串写入HTTP响应。这样，当Ajax请求返回时，JavaScript的`success`回调就能接收...
这个小项目使用了JQuery库来处理前端交互，并通过Servlet在后端进行数据验证。让我们详细了解一下这个AJAX验证机制的工作原理。 首先，AJAX（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下与...
在这里，我们将深入探讨基于jQuery的Ajax应用，以"jQuery+Ajax例子"为标题，结合项目描述和标签，我们来详细讲解这些技术。 1. **jQuery简介** jQuery由John Resig在2006年创建，旨在使JavaScript编程变得更加简单...
这个例子可能包括一个Servlet类，负责处理来自客户端的Ajax请求，以及一个HTML页面，该页面使用jQuery发起Ajax请求并处理响应。通过分析这个示例，开发者可以学习到如何将这三种技术有效地结合起来，创建出更高效的...
标题中的“JQuery利用JSON读取JAVABEANList”指的是在Web开发中，使用JavaScript库JQuery从服务器获取以JSON（JavaScript Object Notation）格式表示的JavaBean列表数据，并在客户端展示的方法。JSON是一种轻量级的...
本小例子将深入探讨如何使用jQuery与Servlet进行数据交互，帮助初学者掌握这一技能。 首先，我们需要在HTML页面中引入jQuery库。通常，我们通过CDN（内容分发网络）链接来快速获取jQuery库，例如： ```html ...
在Web开发中，jQuery、AJAX、Java以及JSON是四个非常关键的技术，它们共同构建了前端与后端高效通信的基础。本实例将详细介绍如何利用jQuery与Java通过JSON进行数据交互，帮助开发者理解并掌握这一重要技能。 ...
在本文中，我们将深入探讨如何使用Jquery和Ajax技术实现前端登录验证，并通过Servlet与DBUtils库进行数据库交互。这是一套适用于初学者的学习案例，旨在帮助他们掌握这些核心技术。 首先，`Jquery`是一个流行的...
同时，在SpringMVC配置文件中启用Json处理器，例如`dispatcher-servlet.xml`： ```xml <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" /> ``` 2. **...
jQuery是一款广泛应用于Web开发的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本资源“jQuery完整实例”是专为初学者和进阶者准备的，旨在帮助读者全面理解并熟练掌握jQuery的...
本文将深入探讨Spring与jQuery AJAX交互以及Servlet与jQuery AJAX交互的知识点。 ### Spring与jQuery AJAX交互 #### 1. Spring MVC中的RESTful API设计 在Spring MVC中，我们可以创建RESTful服务，通过HTTP的CRUD...