JQuery Servlet Json 下拉框级联

最新推荐文章于 2025-08-21 18:01:40 发布

xjzihan

最新推荐文章于 2025-08-21 18:01:40 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

文章标签： servlet json jquery string function list

本文链接：https://blog.youkuaiyun.com/xjzihan/article/details/7064912

本文介绍如何使用JSON-Lib构建一个简单的级联菜单，包括实体类定义、Servlet实现、JSP页面展示及数据库模拟数据的集成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本来是打算熟悉下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>