jsp二级联动菜单（json响应）

最新推荐文章于 2021-02-27 11:25:46 发布

我不是一个程序员

最新推荐文章于 2021-02-27 11:25:46 发布

阅读量1k

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_42150318/article/details/80581293

版权

该博客介绍如何在JSP中利用AJAX和JSON技术实现二级联动菜单。通过创建一个Servlet来处理请求，根据省份ID获取城市列表，并用JSON进行响应。在客户端，JavaScript函数接收JSON响应并动态填充城市下拉菜单。

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

json响应需要导入jar包才能使用

json响应与xml响应比较：json的代码相对少一些

--------------------------jsp-----------------------

<%@page import="com.neuedu.entity.City"%>
<%@page import="com.neuedu.entity.Province"%>
<%@page import="java.util.List"%>
<%@page import="com.neuedu.service.Userservice"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>

<body>
   <%
       Userservice uvl = new Userservice();
       List<Province> list = uvl.selectProvince();
       pageContext.setAttribute("list", list);
   %>
   省份：<select id="province" name="province" onChange="getCity()">
       <option value="---" >请选择</option>
       <c:forEach items="${list}" var="pro" varStatus="ind">
           <option name="ce" value="${pro.provinceId}">${pro.province}</option>

       </c:forEach>
   </select>

   城市：<select id="city" name="city">
       <option value="---">请选择</option>

   </select>

<script type="text/javascript">
   var xmlHttpRequest = false;

   function getCity()
   {
        //以下都是ajxj的基本语法顺序
       if(window.XMLHttpRequest)
       {
           xmlHttpRequest = new XMLHttpRequest();
       }
       else if(window.ActiveXObject)
       {
           xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
       }
       if(xmlHttpRequest)
       {

           var provinceObj = document.getElementById("province");   //省份下拉列表对象
           var proId = provinceObj.options[provinceObj.selectedIndex].value; //选中的省份编号

           var url = "GetCityServlet";
           xmlHttpRequest.open("post", url, true);

           xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

           /* xmlHttpRequest.onreadystatechange = callback_xml; */
           xmlHttpRequest.onreadystatechange = callback_json;
           xmlHttpRequest.send("proId="+proId);
       }
       else
       {
           alert("XMLHttpRequest对象创建失败");
       }
   }


   /*
   * json的回调函数
   */
   function callback_json()
   {

       if(xmlHttpRequest.readyState==4)
       {
           if(xmlHttpRequest.status==200)
           {/*
                              [
                              {"cid":1001,"cname":"广州市"},
                              {"cid":1002,"cname":"深圳市"},
                              {"cid":1003,"cname":"清远市"}
                            ]

                           []表示为一个数组，{}表示为一个对象，对象中属性与属性之间","逗号隔开，属性名与属性值之间":"冒号隔开
               */
               //响应回来的xml格式的城市列表
               var response=xmlHttpRequest.responseText;
               alert(response);

               var cityList=eval(response); //将获取到的字符串转换为可执行的javascript代码

               var cityObj=document.getElementById("city");

               cityObj.length=1;

               for(var i=0;i<cityList.length;i++){
                   var city=cityList[i];
                   /* alert(i); */

//这里的city.cityId和city.city必须是与传进来的对象的key的值一致（cityId,city）才能拿到里面的值

                   var cid=city.cityId;    //cityId 城市编号
                   var cname=city.city; //city 城市名称

                   cityObj.options[cityObj.options.length]=new Option(cname,cid);
               }
           }

       }


   }

-----------------------------------------------------

----------------------servlet-----------------------

package com.neuedu.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.neuedu.entity.City;
import com.neuedu.service.Userservice;

import net.sf.json.JSONArray;

/**
* Servlet implementation class GetCityServlet
*/
@WebServlet("/GetCityServlet")
public class GetCityServlet extends HttpServlet {
   private static final long serialVersionUID = 1L;

   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       String proId =request.getParameter("proId");
       System.out.println("proId:"+proId);
       Userservice service=new Userservice();
       List<City> list=service.selectCity(proId);

       JSONArray json=JSONArray.fromObject(list); //json一条语句就能接收到，而xml需要通过遍历集合，存xml的格式
       System.out.println(json.toString());

       response.setContentType("application/json;charset=utf-8");

       PrintWriter writer=response.getWriter();
       writer.write(json.toString());
       writer.flush();
       writer.close();