一、文件位置
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>选择 商 品 :</label>
<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> <select id="thing" name="thing" onChange="thingId(this);">
<option value="0">商品名称</option>
</select>
<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,操作更方便哦