用ajax+servlet实现二级联动(以省份与城市为例)

最新推荐文章于 2023-12-19 14:41:30 发布

原创最新推荐文章于 2023-12-19 14:41:30 发布 · 6.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#servlet #ajax #xmlhttprequest #function #string #safari

ajax 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用Ajax实现二级联动的方法，通过在下拉列表框中触发onchange事件，利用Ajax向后台发送请求获取数据，并动态更新第二个下拉列表框的内容。

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

1.实现思路：

在下拉列表框中编写js函数触发onchange事件，在这js函数中将选中的name值通过ajax传给后台servlet，在servlet中通过request.getParameter("name")获得选中的name，调用后台的方法得到相应的城市列表(此例没有数据库)。然后如果查到响应的城市的话将其列表组成一个用"#"号分割的字符串str,将其放到response的Writer中。然后在回调函数中接受应答字符串str，调用split("#")方法得到相应的城市数组，然后取得index.jsp的下拉列表框ID，将相应的城市用循环动态的加入到城市列表框中。

2.具体例子

(1)index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>以城市与省份为例，用ajax实现二级联动</title> </head> <mce:script type="text/javascript"></mce:script> <body> <form> 选择省份: <select id="provinceid" onchange="getCity()"> <option value="none"> 请选择 </option> <option value="guangdong"> 广东 </option> <option value="ningxia"> 宁夏 </option> </select> 城市: <select id="cityid"> <option value="none"> 没有数据 </option> </select> </form> </body> </html>

(2)GetCity.java

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; public class GetCity extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.reset(); String name=request.getParameter("provinceName")==null?"":request.getParameter("provinceName"); System.out.print(name); String str=""; if(name.trim().equals("guangdong")){ str="广州#深圳#东莞#中山#珠海#惠东"; }else if(name.trim().equals("ningxia")){ str="银川#吴忠#中卫#中宁#固原"; }else{ str="没有数据"; } response.setContentType("text/html"); response.setCharacterEncoding("utf-8"); response.getWriter().write(str); response.getWriter().flush(); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } }

(3)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"> <servlet> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>GetCity</servlet-name> <servlet-class>GetCity</servlet-class> </servlet> <servlet-mapping> <servlet-name>GetCity</servlet-name> <url-pattern>/GetCity</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>

3.运行效果：