Ajax案例：三级联动查询员工的信息(三张表进行内连接)

　　需求分析：

　　通过数据库连接池，可以查询到数据库中员工的各种信息，通过点击下拉框的方式实现三级联动，即：没有点击city下拉框，后面两个下拉框中没有值，这样，点击city下拉框，department下拉框中才有值，点击department下拉框后employee下拉框中才有值，才可以进行选择，不可以跨级点击；点击最后一个下拉框可以将员工的id，last_name，email，salary，显示在下面的表格中；　　

　　实现上述功能的方法：

　　1.c3p0数据库连接池，实现数据库的链接；JdbcUtils类，连接数据库，代码更加简洁；

　　2.Jackson架包，简化JSON代码，使用其类，方法；ObjectMapper mapper=new ObjectMapper();String result=mapper.writeValueAsString(employee);其可以获取类中get方法名，并且获取其值；

　　3.使用了jstl标准标签库，jQuery，不用在jsp中插入代码

　　4.使用到了Ajax：不需要刷新页面，就可实现局部页面更新的技术；其方法：$.getJSON(url,args,function(data){}向指定的jsp页面中插入标签；

　　5.使用blockUI，使用时要插入jQuery插件jquery.blockUI.js，每次点击下拉框都出现正在刷新的假象，其实就是一张静态的图片

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

先将一些架包导进去：

连接c3p0数据连接池的架包：c3p0-0.9.1.2.jar；

实现oracle数据库和Eclipse软件跨平台连接的包：ojdbc6.jar

实现数据库连接池方法的包：commons-dbutils-1.3.jar

Jackson架包，简化JSON代码：jackson-core-asl-1.9.11.jar，jackson-mapper-asl-1.9.11.jar

jstl标准标签库相关的包：jstl.jar，standard.jar

jQuery架包，放在WebContent/scripts：jquery-1.7.2.js，jQuery插件：jquery.blockUI.js

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

　　连接c3p0数据库连接池，成功后，获取oracle数据中的三张表：分别是：employees，departments，locations；两两之间有相同的列，可以实现内连接；

三个封装表中部分信息的类：employee，department，location；

package com.lanqiao.javaweb.jdbc;

public class Employee {

    private Integer employeeId;
    private String lastName;
    private String email;
    private double salary;
    public Employee() {
        super();
        // TODO Auto-generated constructor stub
    }
    public Employee(Integer employeeId, String lastName, String email, double salary) {
        super();
        this.employeeId = employeeId;
        this.lastName = lastName;
        this.email = email;
        this.salary = salary;
    }
    public Integer getEmployeeId() {
        return employeeId;
    }
    public void setEmployeeId(Integer employeeId) {
        this.employeeId = employeeId;
    }
    public String getLastName() {
        return lastName;
    }
    public void setLastName(String lastName) {
        this.lastName = lastName;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public double getSalary() {
        return salary;
    }
    public void setSalary(double salary) {
        this.salary = salary;
    }
    @Override
    public String toString() {
        return "Employee [employeeId=" + employeeId + ", lastName=" + lastName + ", email=" + email + ", salary="
                + salary + "]";
    } 

}

package com.lanqiao.javaweb.jdbc;

public class Department {
    private Integer departmentId;
    private String departmentName;

    public Department() {
        super();
        // TODO Auto-generated constructor stub
    }

    public Department(Integer departmentId, String departmentName) {
        super();
        this.departmentId = departmentId;
        this.departmentName = departmentName;
    }

    public Integer getDepartmentId() {
        return departmentId;
    }

    public void setDepartmentId(Integer departmentId) {
        this.departmentId = departmentId;
    }

    public String getDepartmentName() {
        return departmentName;
    }

    public void setDepartmentName(String departmentName) {
        this.departmentName = departmentName;
    }

    @Override
    public String toString() {
        return "Department [departmentId=" + departmentId + ", departmentName=" + departmentName + "]";
    }

}
package com.lanqiao.javaweb.jdbc;

public class Location {
    private Integer locationId;
    private String city;

    public Location() {
        super();
        // TODO Auto-generated constructor stub
    }

    public Location(Integer locationId, String city) {
        super();
        this.locationId = locationId;
        this.city = city;
    }

    public Integer getLocationId() {
        return locationId;
    }

    public void setLocationId(Integer locationId) {
        this.locationId = locationId;
    }

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

    @Override
    public String toString() {
        return "Location [locationId=" + locationId + ", city=" + city + "]";
    }

}

在src目录下建立c3p0-config.xml文件，配置和映射连接数据库的属性；

<?xml version="1.0" encoding="UTF-8"?>

<c3p0-config>
　　　　<named-config name="mvcapp">

<!-- 指定连接数据源的基本属性 -->
　　　　<property name="user">oraclejava</property>
　　　　<property name="password">lxn123</property>
　　　　<property name="driverClass">oracle.jdbc.driver.OracleDriver</property>
　　　　<property name="jdbcUrl">jdbc:oracle:thin:@localhost:1521:orcl1</property>

<!-- 若数据库中连接数不足时, 一次向数据库服务器申请多少个连接 -->
　　　　<property name="acquireIncrement">5</property>
　　　　<!-- 初始化数据库连接池时连接的数量 -->
　　　　<property name="initialPoolSize">10</property>
　　　　<!-- 数据库连接池中的最小的数据库连接数 -->
　　　　<property name="minPoolSize">10</property>
　　　　<!-- 数据库连接池中的最大的数据库连接数 -->
　　　　<property name="maxPoolSize">50</property>

　　　　<!-- C3P0 数据库连接池可以维护的 Statement 的个数 -->
　　　　<property name="maxStatements">20</property>
　　　　<!-- 每个连接同时可以使用的 Statement 对象的个数 -->
　　　　<property name="maxStatementsPerConnection">5</property>

　　</named-config>

</c3p0-config>

建立JdbcUtils类：利用JdbcUtils包中的方法，简便的实现数据库连接池的连接

package com.lanqiao.javaweb.jdbc;

import java.sql.Connection;
import java.sql.SQLException;

import org.junit.Test;

import com.mchange.v2.c3p0.ComboPooledDataSource;

//c3p0数据库连接池的方法类
public class JdbcUtils {
    //释放数据库连接的方法
    public static void releaseConnection(Connection connection){
        try {
            if(connection!=null){
                connection.close();
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    //连接数据库的方法
    public static ComboPooledDataSource dataSource=null;
    static{
        dataSource=new ComboPooledDataSource("mvcapp");
    }

    //获取数据库的链接，返回connection对象
    public static Connection getConnection() throws Exception{
        return dataSource.getConnection();
    }
    @Test
    //测试数据库连接池是否连接成功
    public void testTT() throws Exception{
        System.out.println(getConnection());
    }

    //类的私有构造方法
    private JdbcUtils() {}

    //此方法，是本类的调用方法，可以调用本类的各个方法
    private static JdbcUtils instance=new JdbcUtils();
    public static JdbcUtils getInstanece(){
        return instance;
    }
}

建立BaseDAO类，其中有查询数据库中数据的方法；

package com.lanqiao.javaweb.jdbc;

import java.sql.Connection;
import java.util.List;

import org.apache.commons.dbutils.DbUtils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;

public class BaseDAO {
    //此类是 对数据库的增伤改查的一些方法，调用的是QueryRunner类中的一些方法，实现对数据库中数据的增伤改查

    private static final QueryRunner runner=new QueryRunner();

    //返回所对应的list集合,获得的是数据库中所有数据的集合
    public <T> List<T> getForList(String sql,Class<T> clazz,Object...args) throws Exception{
        //Object...args,为可变参数
        //Class<T> clazz,反射参数

        List<T> list=null;
        Connection conn=null;
        try {
            conn=JdbcUtils.getConnection();
            list=runner.query(conn, sql, new BeanListHandler<T>(clazz),args);
        } catch (Exception e) {
            e.printStackTrace();

        }finally {
            //DbUtils是，架包commons-dbutils-1.3.jar里面的类，
            //方法closeQuietly为该类的方法，实现了关闭数据库连接池
            DbUtils.closeQuietly(conn);
        }

        return list;
    }

    //此方法是传入一个sql语句进入，返回某一个对象
    public <T> T get(String sql,Class<T> clazz,Object...args){
        T result=null;
        Connection conn=null;
        try {
            conn=JdbcUtils.getConnection();
            result=runner.query(conn, sql, new BeanHandler<T>(clazz),args);
        } catch (Exception e) {

        }finally {
            DbUtils.closeQuietly(conn);
        }
        return result;
    }

}

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

数据库连接池，连接的方法，查询方法等前期准备工作完成了；然后是servlet类的建立和jsp页面的处理工作；

建立一个点击触发的jsp页面：employee.jsp(比较简单)；

<%response.sendRedirect("employeeServlet?method=listLocation");%>

web.xml文件中的配置和映射；是servlet类：EmployeeServlet与两个jsp页面实现连接；

<?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_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>Ajax-1</display-name>
  <servlet>
    <description></description>
    <display-name>EmployeeServlet</display-name>
    <servlet-name>EmployeeServlet</servlet-name>
    <servlet-class>com.lanqiao.javaweb.jdbc.EmployeeServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>EmployeeServlet</servlet-name>
    <url-pattern>/employeeServlet</url-pattern>
  </servlet-mapping>
</web-app>

建立servlet类：EmployeeServlet，及employees.jsp页面，实现三级联动的功能；

package com.lanqiao.javaweb.jdbc;

import java.io.IOException;
import java.lang.reflect.Method;
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.codehaus.jackson.map.ObjectMapper;

public class EmployeeServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        //获取method的值
        String methodName=request.getParameter("method");

        try {
            //利用反射获取本类中method=?，的方法名，
            Method method=
                getClass().getDeclaredMethod(methodName, HttpServletRequest.class,HttpServletResponse.class);
            method.invoke(this, request, response);
        } catch (Exception e) {

            e.printStackTrace();
        }
    }

    //调用 BaseDAO类，其中有查询员工信息的方法
    private static BaseDAO baseDao=new BaseDAO();

    //通过locations查询员工id,所在城市
    protected void listLocation
        (HttpServletRequest request, HttpServletResponse response) throws Exception{

        String sql="select location_id locationId,city from locations";

        //调用BaseDAO的getForList方法，查询所有的值
        List<Location> locations=baseDao.getForList(sql, Location.class);

        request.setAttribute("locations", locations);
        request.getRequestDispatcher("/employees.jsp").forward(request, response);
     }

    protected void listDepartments(HttpServletRequest request, HttpServletResponse response)
        throws Exception{
        String locationId=request.getParameter("locationId");

        String sql="select department_id departmentId,department_name departmentName "
                + "from departments d where d.location_id=?";

        List<Department> departments=
                baseDao.getForList(sql, Department.class, Integer.parseInt(locationId));

        //Jackson架包，简化JSON代码，使用其类，方法；ObjectMapper mapper=new ObjectMapper();
        //String result=mapper.writeValueAsString(employee);其可以获取类中get方法名，并且获取其值；
        ObjectMapper mapper=new ObjectMapper();
        String result=mapper.writeValueAsString(departments);

        //System.out.println(result);
        //text/javascript重定向到jsp页面的类型
        response.setContentType("text/javascript");
        response.getWriter().print(result);

    }

    //
    protected void listEmployees(HttpServletRequest request, HttpServletResponse response)
            throws Exception{
            String departmentId=request.getParameter("departmentId");

            String sql="select employee_id employeeId,last_name lastName "
                    + "from employees e where e.department_id=?";

            List<Employee> employees=
                    baseDao.getForList(sql, Employee.class, Integer.parseInt(departmentId));

            ObjectMapper mapper=new ObjectMapper();
            String result=mapper.writeValueAsString(employees);

            response.setContentType("text/javascript");
            response.getWriter().print(result);

        }
        //通过employeeId 查看某个员工的信息
        protected void listMessage(HttpServletRequest request, HttpServletResponse response)
            throws Exception{
            String employeeId=request.getParameter("employeeId");

            String sql="select employee_id employeeId,last_name lastName,email,salary "
                    + "from employees where employee_id=?";

            List<Employee> employee=
                    baseDao.getForList(sql, Employee.class, Integer.parseInt(employeeId));

            ObjectMapper mapper=new ObjectMapper();
            String result=mapper.writeValueAsString(employee);

            //System.out.println(result);
            response.setContentType("text/javascript");
            response.getWriter().print(result);

        }
}

employees.jsp页面

<%@page import="com.lanqiao.javaweb.jdbc.Location"%>
<%@ 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>
<script type="text/javascript" src="${pageContext.request.contextPath }/scripts/jquery-1.7.2.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/scripts/jquery.blockUI.js"></script>
<script type="text/javascript">
    $(function(){
        //刚开始隐藏查询的table
        $("#emp").hide();

        //使用blockUI，使用时要插入jQuery插件jquery.blockUI.js
        //每次点击下拉框都出现正在刷新的假象，其实就是一张静态的图片
        $(document).ajaxStart(function(){
            $.blockUI({
                message: $(‘#loading‘),
                css:{
                    top:($(window).height()-400)/2+‘px‘,
                    lift:($(window).width()-400)/2+‘px‘,
                    width:‘400px‘,
                    border:‘none‘
                },
                overlayCSS:{backgroundColor:‘#fff‘}
            })
        }).ajaxStop($.unblockUI);
        //第一个下拉框，
        $("#city").change(function(){
            $("#department option:not(:first)").remove();
            var city=$(this).val();

            if(city != ""){
                var url="employeeServlet?method=listDepartments";
                var args={"locationId":city,"time":new Date()};

                $.getJSON(url,args,function(data){
                    if(data.length==0){
                        alert("当前城市没有部门！！！");
                    }
                    else{
                        for(var i=0;i<data.length;i++){
                            var deptId=data[i].departmentId;
                            var deptName=data[i].departmentName;

                            $("#department").append("<option value=‘"+deptId+"‘>"+deptName+"</option>");
                        }
                    }
                });
            }
        });
        //第二个下拉框
        $("#department").change(function(){
            $("#employee option:not(:first)").remove();
            var departmentName=$(this).val();

            if(departmentName !=""){

                var url="employeeServlet?method=listEmployees";
                var args={"departmentId":departmentName,"time":new Date()};

                $.getJSON(url,args,function(data){
                    if(data.length==0){
                        alert("当前部门没有员工！！！");
                    }
                    else{

                        for(var i=0;i<data.length;i++){
                            var employeeId=data[i].employeeId;
                            var employeeName=data[i].lastName;
                            //alert("dd");
                            $("#employee").append("<option value=‘"+employeeId+"‘>"+employeeName+"</option>");
                        }
                    }
                });
            }
        });
        //第三个下拉框
        $("#employee").change(function(){
            $("#emp").show();

            var employeeName=$(this).val();
            if(employeeName!=""){
                var url="employeeServlet?method=listMessage";
                var args={"employeeId":employeeName,"time":new Date()};

                $.getJSON(url,args,function(data){
                    if(data.length==0){
                        alert("此员工无信息无信息！！！");
                    }
                    else{
                        for(var i=0;i<data.length;i++){
                            var employeeId=data[i].employeeId;
                            var lastName=data[i].lastName;
                            var email=data[i].email;
                            var salary=data[i].salary;
                            //alert(email);
                            $("#id").append("<td>"+employeeId+"</td>");
                            $("#name").append("<td>"+lastName+"</td>");
                            $("#email").append("<td>"+email+"</td>");
                            $("#salary").append("<td>"+salary+"</td>");
                        }
                    }
                });
            }

        });
    });

</script>
</head>
<body>

    <img  id="loading" src="images/1.jpg" style="display:none">

    <center>
        <br><br>
        City:
        <select id="city">
            <option value="">请选择...</option>
            <c:forEach items="${locations }" var="location">
                <option value="${location.locationId }">${location.city }</option>
            </c:forEach>
        </select>

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        Department:
        <select id="department">
            <option value="">请选择...</option>

        </select>

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        Employee:
        <select id="employee">
            <option value="">请选择...</option>

        </select>
        <br><br>
        <br><br>

        <table id="emp" width="350" border="1" cellpadding="5" cellspacing="0" >
            <tr>
                 <th>Id</th>
                 <th>Name</th>
                <th>Email</th>
                <th>Salary</th>
            </tr>
                <td id="id"></td>
                <td id="name"></td>
                <td id="email"></td>
                <td id="salary"></td>
        </table>
    </center>

</body>
</html>
时间： 2024-10-11 22:00:57

Ajax案例：三级联动查询员工的信息(三张表进行内连接)的相关文章

AJAX省市区三级联动下拉列表实现 JAVA开发

转载自:http://blog.sina.com.cn/s/blog_a48af8c001011lx1.html 例子--District Picker            http://fengyuanchen.github.io/distpicker/ 此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为: $(document).ready(function(){   

ajax实现三级联动下拉菜单

先不要着急去实现功能,我们第一步首先要理清思路,想要实现三级联动,首先要有三个下拉框,然后点击第一个下拉菜单,可以联动到第二个,点击第二个联动到第三个,实现省市区的三级联动,用到的数据表如下: 为了以后可以随时拿出来用,我们先在主页面建立一个div叫sanji,然后用一个js页面来引用: 主页面引入Jquery和js: <title>无标题文档</title> <script src="jquery-3.2.0.min.js"></script

PHP ajax 实现三级联动

在一个单独JS页面中,利用ajax实现三级联动,做成一个三级联动形式,以便于以后随时调用 JS代码: 1 $(document).ready(function(e) { 2 $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); 3 4 //填充内容

Yii的Relational Active Record三张表连接查询

需求如下: 查询book表信息,同时关联entitystags表,以entitystags的字段eid关联book的主键,再关联查询tags表,以entitystags表的tid字段关联tags表的主键id 同时读出这三张表的信息来,在Yii可以如下处理,先在relations方法中声明三张表的关系,在控制器中,以with表明渴求式调用,即可,代码如下: 在book的model文件中声明关系: public function relations(){ return array( 'entitys

三级联动显示中国省市信息

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

ajax省市区三级联动

jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博客讲解是按照两级联动,但下载的资源是三级联动含sql文件. 效果图: 首页核心代码: [html] view plain copy <% List<HashMap<String,Object>> maps = ConnectionUtil.findProvinces(); pag

用ajax实现三级联动

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

完整的Ajax及三级联动小练习

Ajax结构: var name = $("#text_1").val(); $.ajax({ url: "Ashxs/Handler.ashx",//一般处理程序路径 data: { "name": name },//要传输的数据,冒号前面是键名后面是要传输的数据,如果有多条数据在大括号内用逗号拼接 type: "post",//传输方式 dataType: "json",//返回数据类型 success

Jquery Ajax + php 三级联动实例

sanji.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo