JQuery Servlet Json 下拉框级联
2011-12-12 21:14
113 查看
本来是打算熟悉下JSON解析数据与客户端进行交互，顺便写个级联。
1.下载json-lib-2.4-jdk15.jar，地址：http://json-lib.sourceforge.net/
2.使用json-lib-2.4-jdk15.jar的辅助jar需要
jakarta commons-lang 2.5
jakarta commons-beanutils 1.8.0
jakarta commons-collections 3.2.1
jakarta commons-logging 1.1.1
ezmorph 1.0.6
3.创建一个简单的web应用，直接使用Servlet，并引入上述jar包
直接上源码：
ShiEntity.java(实体类)
package entity;
import java.io.Serializable;
public class ShiEntity implements Serializable
{
private int s_id;//编号
private String s_name;//名称
public int getS_id()
{
return s_id;
}
public void setS_id(int s_id)
{
this.s_id = s_id;
}
public String getS_name()
{
return s_name;
}
public void setS_name(String s_name)
{
this.s_name = s_name;
}
}
MyServlet .java(Servlet类,省略了连接数据，只用使用List简单模拟下)
package servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import entity.ShiEntity;
public class MyServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String p_id = request.getParameter("p_id");
Integer pid = p_id == null ? null : Integer.parseInt(p_id.toString());
//模拟从数据库中查询出来
List list = new ArrayList();
if(pid == 1001){
ShiEntity s1 = new ShiEntity();
s1.setS_id(1001);
s1.setS_name("武汉");
ShiEntity s2 = new ShiEntity();
s2.setS_id(1002);
s2.setS_name("荆州");
ShiEntity s3 = new ShiEntity();
s3.setS_id(1003);
s3.setS_name("襄阳");
ShiEntity s4 = new ShiEntity();
s4.setS_id(1004);
s4.setS_name("荆门");
list.add(s1);
list.add(s2);
list.add(s3);
list.add(s4);
}else if(pid == 1002){
ShiEntity s1 = new ShiEntity();
s1.setS_id(1005);
s1.setS_name("长沙");
ShiEntity s2 = new ShiEntity();
s2.setS_id(1006);
s2.setS_name("岳阳");
list.add(s1);
list.add(s2);
}else if(pid == 1003){
ShiEntity s1 = new ShiEntity();
s1.setS_id(1007);
s1.setS_name("深圳");
ShiEntity s2 = new ShiEntity();
s2.setS_id(1008);
s2.setS_name("东莞");
ShiEntity s3 = new ShiEntity();
s3.setS_id(1009);
s3.setS_name("广州");
list.add(s1);
list.add(s2);
list.add(s3);
}else if(pid == 1004){
ShiEntity s1 = new ShiEntity();
s1.setS_id(1010);
s1.setS_name("重庆");
list.add(s1);
}
String jsonText = JSONArray.fromObject(list).toString();
System.out.println(jsonText);
response.setCharacterEncoding("UTF-8");
response.getWriter().write(jsonText);
}
}
JSP页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JSON级联菜单</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sheng").change(function(){
var pid = $(this).val();
var strHTML = "";
if(pid == 0){
strHTML = "<option value=\"0\">--请选择市--</option>"
$("#shi").html(strHTML);
return;
}
$.ajax({
type: "post",
url: "MyServlet",
//data: "p_id=" + $(this).val(),
data: {p_id : pid},
dataType: "json",
success: function(data){
var len = data.length;
for(var i = 0;i < len;i++){
strHTML += "<option value=\"" + data[i].s_id + "\">" + data[i].s_name + "</option>";
}
$("#shi").html(strHTML);
},
error: function(){
alert("解析数据错误！");
}
});
});
});
</script>
</head>
<body bgcolor="#FFFFFF" style="text-align: center;">
<Br/><Br/><Br/><Br/><Br/><Br/>
省份：
<select id="sheng">
<option value="0">--请选择省份--</option>
<option value="1001">湖北</option>
<option value="1002">湖南</option>
<option value="1003">广东</option>
<option value="1004">重庆</option>
</select>
市级：
<select id="shi">
<option value="0">--请选择市--</option>
</select>
</body>
</html>
web.xml中的Servlet配置
<servlet>
<servlet-name>MyServlet</servlet-name>
<servlet-class>servlet.MyServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>MyServlet</servlet-name>
<url-pattern>/MyServlet</url-pattern>
</servlet-mapping>
4.附源码(http://download.csdn.net/detail/xjzihan/3912702)，不知如何上传附件，就上传到资料那边去了。望见谅！
1.下载json-lib-2.4-jdk15.jar，地址：http://json-lib.sourceforge.net/
2.使用json-lib-2.4-jdk15.jar的辅助jar需要
jakarta commons-lang 2.5
jakarta commons-beanutils 1.8.0
jakarta commons-collections 3.2.1
jakarta commons-logging 1.1.1
ezmorph 1.0.6
3.创建一个简单的web应用，直接使用Servlet，并引入上述jar包
直接上源码：
ShiEntity.java(实体类)
package entity;
import java.io.Serializable;
public class ShiEntity implements Serializable
{
private int s_id;//编号
private String s_name;//名称
public int getS_id()
{
return s_id;
}
public void setS_id(int s_id)
{
this.s_id = s_id;
}
public String getS_name()
{
return s_name;
}
public void setS_name(String s_name)
{
this.s_name = s_name;
}
}
MyServlet .java(Servlet类,省略了连接数据，只用使用List简单模拟下)
package servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import entity.ShiEntity;
public class MyServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String p_id = request.getParameter("p_id");
Integer pid = p_id == null ? null : Integer.parseInt(p_id.toString());
//模拟从数据库中查询出来
List list = new ArrayList();
if(pid == 1001){
ShiEntity s1 = new ShiEntity();
s1.setS_id(1001);
s1.setS_name("武汉");
ShiEntity s2 = new ShiEntity();
s2.setS_id(1002);
s2.setS_name("荆州");
ShiEntity s3 = new ShiEntity();
s3.setS_id(1003);
s3.setS_name("襄阳");
ShiEntity s4 = new ShiEntity();
s4.setS_id(1004);
s4.setS_name("荆门");
list.add(s1);
list.add(s2);
list.add(s3);
list.add(s4);
}else if(pid == 1002){
ShiEntity s1 = new ShiEntity();
s1.setS_id(1005);
s1.setS_name("长沙");
ShiEntity s2 = new ShiEntity();
s2.setS_id(1006);
s2.setS_name("岳阳");
list.add(s1);
list.add(s2);
}else if(pid == 1003){
ShiEntity s1 = new ShiEntity();
s1.setS_id(1007);
s1.setS_name("深圳");
ShiEntity s2 = new ShiEntity();
s2.setS_id(1008);
s2.setS_name("东莞");
ShiEntity s3 = new ShiEntity();
s3.setS_id(1009);
s3.setS_name("广州");
list.add(s1);
list.add(s2);
list.add(s3);
}else if(pid == 1004){
ShiEntity s1 = new ShiEntity();
s1.setS_id(1010);
s1.setS_name("重庆");
list.add(s1);
}
String jsonText = JSONArray.fromObject(list).toString();
System.out.println(jsonText);
response.setCharacterEncoding("UTF-8");
response.getWriter().write(jsonText);
}
}
JSP页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JSON级联菜单</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sheng").change(function(){
var pid = $(this).val();
var strHTML = "";
if(pid == 0){
strHTML = "<option value=\"0\">--请选择市--</option>"
$("#shi").html(strHTML);
return;
}
$.ajax({
type: "post",
url: "MyServlet",
//data: "p_id=" + $(this).val(),
data: {p_id : pid},
dataType: "json",
success: function(data){
var len = data.length;
for(var i = 0;i < len;i++){
strHTML += "<option value=\"" + data[i].s_id + "\">" + data[i].s_name + "</option>";
}
$("#shi").html(strHTML);
},
error: function(){
alert("解析数据错误！");
}
});
});
});
</script>
</head>
<body bgcolor="#FFFFFF" style="text-align: center;">
<Br/><Br/><Br/><Br/><Br/><Br/>
省份：
<select id="sheng">
<option value="0">--请选择省份--</option>
<option value="1001">湖北</option>
<option value="1002">湖南</option>
<option value="1003">广东</option>
<option value="1004">重庆</option>
</select>
市级：
<select id="shi">
<option value="0">--请选择市--</option>
</select>
</body>
</html>
web.xml中的Servlet配置
<servlet>
<servlet-name>MyServlet</servlet-name>
<servlet-class>servlet.MyServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>MyServlet</servlet-name>
<url-pattern>/MyServlet</url-pattern>
</servlet-mapping>
4.附源码(http://download.csdn.net/detail/xjzihan/3912702)，不知如何上传附件，就上传到资料那边去了。望见谅！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery 和 json 简单例子（注意callback函数的处理！！） （servlet返回json，jquery更新，java json）
- Cross Domain JSONP ( Json with padding ) with Jquery and Servlet or JAX-WS
- jQuery操作JSON、服务端操作JSON（Servlet、SpringMVC）
- Jquery - json -servlet-相互传递
- java（jsp/servlet ）取得客户端post过来的json格式数据(jquery等)
- servlet+jquery+ajax+json 例子
- Jsp+Servlet+javaBean+Json+JQuery小知识集合
- Jquery+ajax+json+servlet原理和Demo
- Jquery+ajax+json+servlet原理和Demo
- jQuery 向 servlet 发送和接受JSON数据。
- hibernate中关于servlet+Ajax+jquery+json+gson实现级联效果
- servlet+jquery+ajax+json 例子
- JQuery+JS+JSON+Servlet实例
- Jquery+ajax+json+servlet原理和Demo
- Jquery+ajax+json+servlet原理和Demo
- servlet/jquery/json 防止乱码
- 当使用servlet输出json时，浏览器端jquery的ajax遇到parse error的问题
- jquery ajax servlet json（struts2） 动态生成table
- 当使用servlet输出json时，浏览器端jquery的ajax遇到parse error的问题
- Ubuntu 14.04 Web 程序开发（4）基于JQuery+Ajax+Json+Servlet实现PUT GET