Web多级联动下拉框（从数据库中获取数据，MVC模式,使用的是tomcat）

最新推荐文章于 2024-07-25 12:41:07 发布

稳不住了，他们能赢

最新推荐文章于 2024-07-25 12:41:07 发布

阅读量1.5k

点赞数 4

分类专栏：技术文章标签：多级联动下拉框 ajax 数据库数据

本文链接：https://blog.csdn.net/weixin_44255794/article/details/93731191

版权

技术专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、文件位置
java代码的位置
在这里插入图片描述
二、先编写一个jsp页面用来跳转到多级下拉框的jsp页面
随便编一个就行了,这里就叫index.jsp
1.index.jsp

<%@ page language="java"  pageEncoding="UTF-8"%>
<%@ page contentType="text/html;charset=UTF-8" import="edu.model.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<jsp:include page="Header.jsp" />

<html>
<head>
<title>首页</title>
<link rel="stylesheet" href="../css/show_css.css" type="text/css">
</head>
<body>
				<a href="ddbone.do" target = "right">跳转到下拉框页面</a>
</body>
</html>

2.Xlk.jsp

<%@ page language="java"  pageEncoding="UTF-8"%>
<%@ page contentType="text/html;charset=UTF-8" import="edu.model.*,java.util.*,java.sql.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>
<html>
<jsp:include page="Header.jsp" />
<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
<script  src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function kindId(Id){
		var Id = Id.value;
		$.ajax({
			url:"${pageContext.request.contextPath}/view/ddbtwo.do",
			type:"get",
			timeout:"1000",
			data:{Id:Id},
			success:function(data){
				$("#thing option").remove();
				$("#thing").append("<option value='0'>选择商品</option>");
				if (data != 0) {
					for ( var i = 0; i < data.length; i++) {
						var classId = data[i].classId;
						var className = data[i].className;
						var Id_brand = data[i].Id_Brand;
						$("#thing").append(
								"<option value="+Id_brand+">"
										+ className + "</option>");
					}
				}
			},
			error : function(XMLResponse) {
				alert(XMLResponse.responseText);
			}
		});
	}
function thingId(Id){	
	var Id = Id.value;
	$.ajax({
		url:"${pageContext.request.contextPath}/view/ddbthree.do",
		type:"get",
		timeout:"1000",
		data:{Id:Id},
		success:function(data){
			$("#brand option").remove();
			$("#brand").append("<option value='0'>选择品牌</option>");
			if (data != 0) {
				for ( var i = 0; i < data.length; i++) {
					var classId = data[i].classId;
					var className = data[i].className;
					var Id_model = data[i].Id_Model;
					$("#brand").append(
							"<option value="+Id_model+">"
									+ className + "</option>");
				}
			}
		},
		error : function(XMLResponse) {
			alert(XMLResponse.responseText);
		}
	});
}

function brandId(Id){	
var Id = Id.value;
$.ajax({
	url:"${pageContext.request.contextPath}/view/ddbfour.do",
	type:"get",
	timeout:"1000",
	data:{Id:Id},
	success:function(data){
		$("#model option").remove();
		$("#model").append("<option value='0'>选择型号</option>");
		if (data != 0) {
			for ( var i = 0; i < data.length; i++) {
				var Id_model = data[i].Id_Model;
				var className = data[i].className;
				$("#model").append(
						"<option value="+className+">"
								+ className + "</option>");
			}
		}
	},
	error : function(XMLResponse) {
		alert(XMLResponse.responseText);
	}
});
}

</script>
<style type="text/css">

	.d1{
		width:800px;
		height:auto;
		margin:-50px auto 0 500px;
		/*color:#2ec0f6;*/
		font-size: 20px;
	}
	
	.d2{
		width:auto;
		height:auto;
		position:absolute;
		left:250px;
		top:30px;
		right:20px;
		bottom:auto;
		font-size: 20px;
	}
</style> 
<head>
<meta charset="UTF-8">
<title>四级联动获取数据库数据</title>
</head>
<body> 
<div class="d1">
   <form name="myform" onSubmit="return isValid(this);" action="wjAddJudge.do">
		<div>		
			<label>选择&nbsp;&nbsp;&nbsp;&nbsp;商&nbsp;&nbsp;&nbsp;&nbsp;品&nbsp;&nbsp;:</label>&nbsp;&nbsp;
			<select id="kind" name="kind" onChange="kindId(this);">
			<option value="0">商品种类</option>
				<c:forEach var="user" items="${list}">    
						<option value="${user.id_menu}">${user.kind}</option>						
               </c:forEach>
			</select>&nbsp;&nbsp;<select  id="thing" name="thing" onChange="thingId(this);">
				<option value="0">商品名称</option>
			</select>&nbsp;&nbsp;
			<select  id="brand" name="brand" onChange="brandId(this);">
				<option value="0">商品品牌</option>
			</select>
			<select  id="model" name="model" >
				<option value="0">品牌型号</option>
			</select>
			
      </div>
    	<div>
			<button type="submit" >添加</button>
		</div>
</form>		
 </div>
</body>
</html>

三、Controller.java代码
1.DdbControl.java

package edu.controller;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.json.JSONArray;
import org.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import edu.model.DBOper;
import edu.model.Ddb;
import edu.model.User;

@Controller
public class DdbControl {    
	//二级联动获取数据库数据		
	//一级下拉框
	@RequestMapping("/view/ddbone")
	public String ddbone(HttpServletRequest request,HttpServletResponse response) throws IOException, ClassNotFoundException, SQLException {
	//调用javabean处理			
		Ddb d=new Ddb();
		ArrayList<Ddb> list=d.two();
		request.setAttribute("list", list);
		return "Xlk.jsp";
	}
	//二级下拉框
	@RequestMapping("/view/ddbtwo")
	public String ddbtwo(HttpServletRequest request,HttpServletResponse response) throws Exception{
		response.setContentType("text/json; charset=UTF-8");
		//获取部门ID
		int id = Integer.parseInt(request.getParameter("Id"));
		PrintWriter out = null;
		
		Ddb d=new Ddb();
		
		try{
			out = response.getWriter();
		}catch(Exception e){
			e.printStackTrace();
		}
		JSONArray array = new JSONArray();
		JSONObject member = null;
		try{
			//根据种类的Id 来查找种类下的所有商品
			List<Ddb> ClassesList = d.two2(id);
			for(Ddb classes:ClassesList){
				member = new JSONObject();
				member.put("classId", classes.getId_Pmenu());
				member.put("className", classes.getThing());
				member.put("Id_Brand", classes.getId_brand());   //三级下拉框的索引
				array.put(member);
			}
		}catch(Exception e){
			e.printStackTrace();
		}
		out.print(array.toString());
		return null;
	}

	//三级下拉框
		@RequestMapping("/view/ddbthree")
		public String ddbthree(HttpServletRequest request,HttpServletResponse response) throws Exception{
			response.setContentType("text/json; charset=UTF-8");
			//获取部门ID
			int id = Integer.parseInt(request.getParameter("Id"));
			PrintWriter out = null;
			
			Ddb d=new Ddb();
			
			try{
				out = response.getWriter();
			}catch(Exception e){
				e.printStackTrace();
			}
			JSONArray array = new JSONArray();
			JSONObject member = null;
			try{
				//根据种类的Id 来查找种类下的所有商品
				List<Ddb> ClassesList = d.three(id);
				for(Ddb classes:ClassesList){
					member = new JSONObject();
					member.put("classId", classes.getId_brand());
					member.put("className", classes.getBrand());
					member.put("Id_Model", classes.getId_model());   //四级下拉框的索引
					array.put(member);
				}
			}catch(Exception e){
				e.printStackTrace();
			}
			out.print(array.toString());
			return null;
		}	
		
		//四级下拉框
		@RequestMapping("/view/ddbfour")
		public String ddbfour(HttpServletRequest request,HttpServletResponse response) throws Exception{
			response.setContentType("text/json; charset=UTF-8");
			//获取部门ID
			int id = Integer.parseInt(request.getParameter("Id"));
			PrintWriter out = null;
					
			Ddb d=new Ddb();
					
			try{
				out = response.getWriter();
			}catch(Exception e){
				e.printStackTrace();
			}
			JSONArray array = new JSONArray();
			JSONObject member = null;
			try{
				//根据种类的Id 来查找种类下的所有商品
				List<Ddb> ClassesList = d.four(id);
				for(Ddb classes:ClassesList){
					member = new JSONObject();
					member.put("Id_Model", classes.getId_model());
					member.put("className", classes.getModel());
					member.put("id_no", classes.getId_no());
					array.put(member);
				}
			}catch(Exception e){
				e.printStackTrace();
			}
			out.print(array.toString());
			return null;
		}			
	}

四、model代码
1.Ddb.java

package edu.model;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

public class Ddb {
	//四级联动获取数据库数据	
	private String kind;
	private String thing;
	private String brand;
	private String model;
	private int id_menu;	
	private int id_Pmenu;
	private int id_brand;
	private int id_model;

	public String getBrand() {
		return brand;
	}
	public void setBrand(String brand) {
		this.brand = brand;
	}
	public String getModel() {
		return model;
	}
	public void setModel(String model) {
		this.model = model;
	}

	public int getId_brand() {
				return id_brand;
		}
	public void setId_brand(int id_brand) {
				this.id_brand = id_brand;
			}
	public int getId_model() {
				return id_model;
			}
		public void setId_model(int id_model) {
				this.id_model = id_model;
			}	
		public String getKind() {
				return kind;
			}
			public void setKind(String kind) {
				this.kind = kind;
			}
			public String getThing() {
				return thing;
			}
			public void setThing(String thing) {
				this.thing = thing;
			}	
			public int getId_Pmenu() {
				return id_Pmenu;
			}


			public void setId_Pmenu(int id_Pmenu) {
				this.id_Pmenu = id_Pmenu;
			}
			public int getId_menu() {
				return id_menu;
			}
		public void setId_menu(int id_menu) {
				this.id_menu = id_menu;
			}
//查询种类(一级下拉框)
			public ArrayList<Ddb> two() throws SQLException, ClassNotFoundException{
				DBOper db=new DBOper();
				String sql="select * from dbo.[kind] ";
				ResultSet rs=db.exeQuery(sql);
				ArrayList<Ddb> list=new ArrayList<Ddb>();
				while(rs.next()){
					Ddb d=new Ddb();
					d.setId_menu(rs.getInt(1));		
					d.setKind(rs.getString(2));
					list.add(d);
				}
				return list;
			}	
			//查询名称(二级下拉框)
			public ArrayList<Ddb> two2(int id_Pmenu) throws SQLException, ClassNotFoundException{
				DBOper db=new DBOper();
		//		String sql="select * from dbo.[menu2] where id_Pmenu='"+id_Pmenu+"'";
				String sql="select * from dbo.[thing] where id_Pmenu='"+id_Pmenu+"'";
				ResultSet rs=db.exeQuery(sql);
				ArrayList<Ddb> list=new ArrayList<Ddb>();
				while(rs.next()){
					Ddb d=new Ddb();
					d.setId_Pmenu(rs.getInt(1));		
					d.setThing(rs.getString(2));	
					d.setId_brand(rs.getInt(3));        //加了一个三级下拉框
					list.add(d);
				}
				return list;
			}	
			
			//查询品牌(三级下拉框)
			public ArrayList<Ddb> three(int id_brand) throws SQLException, ClassNotFoundException{
				DBOper db=new DBOper();
				String sql="select * from dbo.[brand] where id_brand='"+id_brand+"'";
				ResultSet rs=db.exeQuery(sql);
				ArrayList<Ddb> list=new ArrayList<Ddb>();
				while(rs.next()){
					Ddb d=new Ddb();
					d.setId_brand(rs.getInt(1));		
					d.setBrand(rs.getString(2));
					d.setId_model(rs.getInt(3));			//加了一个四级下拉框
					list.add(d);
				}
				return list;
			}	
			
			//查询型号(四级下拉框)
			public ArrayList<Ddb> four(int id_model) throws SQLException, ClassNotFoundException{
				DBOper db=new DBOper();
				String sql="select * from dbo.[model] where id_model='"+id_model+"'";
				ResultSet rs=db.exeQuery(sql);
				ArrayList<Ddb> list=new ArrayList<Ddb>();
				while(rs.next()){
					Ddb d=new Ddb();
					d.setId_model(rs.getInt(1));		
					d.setModel(rs.getString(2));
					d.setId_no(rs.getInt(3));	
					list.add(d);
				}
				return list;
			}			
		}

2.连接数据库(这里用的是SQL Server，所以需要SQL Server的JDBC驱动，如果是MySql就换成MySql的驱动)
DBOper.java

package edu.model;

import java.sql.*;
public class DBOper {
	private String uri="jdbc:sqlserver://localhost:1433;DatabaseName=wjDB";//数据库名字叫wjDB，这里改成自己建的数据库名
	private String user="sa";
	private String password="sa";
	private Connection con;
	private Statement st;
	private ResultSet rs;
	//构造方法
 	public DBOper() throws ClassNotFoundException, SQLException{
 		Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
 		con=DriverManager.getConnection(uri,user,password);
 	}
 	//执行查询
 	public ResultSet exeQuery(String sql) throws SQLException{
 		st=con.createStatement();
 		rs=st.executeQuery(sql);
 		return rs;
 	}
 	//执行更新
 	public void exeUpdate(String sql) throws SQLException{
 		st=con.createStatement();
 		st.executeUpdate(sql);
 	} 	
}

五、相关配置文件
1.web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
  <display-name></display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>WEB-INF/applicationContext.xml</param-value>
  </context-param>
  
  <servlet>
    <servlet-name>springMVC</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>WEB-INF/springMVC.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  
  <servlet-mapping>
    <servlet-name>springMVC</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>
</web-app>

2.springMVC.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
         http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
         http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd">
         
	<!-- 配置组件扫描器 -->
	<context:component-scan base-package="edu.*" />

	<!-- 添加注解驱动 -->
	<mvc:annotation-driven />

	<!-- Spring MVC不处理静态资源 -->
	<mvc:default-servlet-handler />
	
	<!-- 视图解析器 如何把handler 方法返回值解析为实际的物理视图 -->
	<bean
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/view/"></property>
	</bean>
</beans>

3.applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
         http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
         http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd">
	<!-- 数据源 -->
	<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
		<property name="driverClass" value="com.microsoft.sqlserver.jdbc.SQLServerDriver" />
		<property name="jdbcUrl" value="jdbc:sqlserver://localhost:1433;databaseName=userDB" />
		<property name="user" value="sa" />
		<property name="password" value="sa" />
		<property name="minPoolSize" value="2" />
		<property name="maxPoolSize" value="10" />
	</bean>
	<bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
      <property name="dataSource" ref="dataSource"/>
    </bean>    
</beans>

六、数据库中的表
1.kind表
在这里插入图片描述

2.thing表

3.brand表

4.model表

注意:后面三张表的第一个数字要和前一张表对应

以上代码都能从文件中找到
附上文件连接链接：https://pan.baidu.com/s/1EOaBxsvpcH_nPQKccXavtA
提取码：rney
复制这段内容后打开百度网盘手机App，操作更方便哦

稳不住了，他们能赢

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
Web多级联动下拉框（从数据库中获取数据，MVC模式,使用的是tomcat）

一、文件位置java代码的位置二、先编写一个jsp页面用来跳转到多级下拉框的jsp页面随便编一个就行了,这里就叫index.jsp1.index.jsp<%@ page language=“java” pageEncoding=“UTF-8”%><%@ page contentType=“text/html;charset=UTF-8” import=“edu.m...
复制链接

扫一扫

专栏目录