JavaWeb三层联动案例:

来源：互联网发布：win10安装连接网络出错编辑：程序博客网时间：2024/06/06 01:26

JavaWeb三层联动案例:

一.数据库表:

codeid parentid cityName

11 0           北京
1101        11         北京市辖
110101   1101   东城区
110102   1101   西城区
110103   1101   崇文区
110104   1101   宣武区
110105   1101   朝阳区

...

14       0   山西
1401          14        太原
140101   1401   市辖区
140105   1401   小店区
140106   1401   迎泽区
140107   1401   杏花岭区

从表中可以发现,省或直辖市的codeid为两位数字,该省或直辖市下的下一级为四位数字,再下一级为六位数字,例如山西省coidId为14,prentid为0,山西省的城市太原coidid为1401,太原市的市辖区为coidid为140101,parentid为1401,三级的关系是靠parentid来维护的.

二.思路:

1 //页面加载结束时提交异步请求获取第一级下拉表的数据 loadData(sql条件值,要填充数据的下拉表元素);

1) //创建option标签,并给属性和内容赋值

2) //将option标签添加到select下拉框中

2 //为所有除了最后一级的下拉表添加change事件

1) //将当前下拉表之后的所有下拉表长度设为1

2) //重新加载数据 loadData(sql条件,要填充数据的下拉表元素);

三.具体实现

1 province.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<option>请选择省份</option>

</select>

<option>请选择城市</option>

</select>

<option>请选择地区</option>

</select>

</body>

//页面加载结束时提交异步请求获取第一级下拉表的数据 loadData(sql条件值,要填充数据的下拉表元素);

$(function(){

loadData(0,$("#province"));

});

function loadData(value,$select){

$.get("${pageContext.request.contextPath}/getData?parentid="+value,"",function(data){

$(data).each(function(index,element){

//创建option标签,并给属性和内容赋值

var $option = $("<option value='"+element.codeid+"'>"+element.cityName+"</option>");

//将option标签添加到select下拉框中

$select.append($option);

});

},"json");

}

//为所有除了最后一级的下拉表添加change事件

$("#province,#city").change(function(){

//将当前下拉表之后的所有下拉表长度设为1

$(this).nextAll().prop("length",1);

//重新加载数据 loadData(sql条件,要填充数据的下拉表元素);

loadData(this.value,$(this).next());

});

</script>

</html>

2 GetProvince.java

package com.felix.web;

import java.io.IOException;

import java.sql.SQLException;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.commons.dbutils.QueryRunner;

import org.apache.commons.dbutils.handlers.BeanListHandler;

import com.felix.domain.Province;

import com.felix.utils.JDBCUtils;

import flexjson.JSONSerializer;

public class GetProvince extends HttpServlet {

private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

doPost(request, response);

}

protected void doPost(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

//获取参数

int parentid = Integer.parseInt(request.getParameter("parentid"));

System.out.println("parentid="+parentid);

//这里就不分三层架构写了

//构建sql

String sql = "select * from province where parentid=?";

//创建QueryRunner对象

QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource());

//执行sql 并封装结果集合数据

try {

List<Province> list = qr.query(sql, new BeanListHandler<Province>(Province.class), parentid);

//将集合数据转成json字符串

JSONSerializer js = new JSONSerializer();

String data = js.serialize(list);

System.out.println(data);

//设置响应内容类型

response.setContentType("text/html;charset=utf-8");

//向json字符串数据响应给客户端

response.getWriter().print(data);

} catch (SQLException e) {

e.printStackTrace();

throw new RuntimeException("查询数据失败");

}

阅读全文

0 0