山西省的网站,logo设计培训,做网站技巧,双语网站管理系统实现级联查询
共有两个下拉框#xff0c;第一级为学院#xff0c;第二级为学院开设的科目。 实现的功能为#xff1a;当改变学院的选择#xff0c;第二级下拉框需变为对应学院开设的科目内容。
结果预览#xff1a;
jsp页面
% page contentTypetext/html;…实现级联查询
共有两个下拉框第一级为学院第二级为学院开设的科目。 实现的功能为当改变学院的选择第二级下拉框需变为对应学院开设的科目内容。
结果预览
jsp页面
% page contentTypetext/html; charsetUTF-8 pageEncodingUTF-8 %
!DOCTYPE html
html
headtitleJSP - Hello World/titlescript typetext/javascript srcjs/jquery-3.6.0.min.js/scriptscript typetext/javascript srcjs/index.js/script
/head
body
学院
select nameacademy idselect-academy/select
科目
select namesubject idselect-subject/select
/body
/html其中导入了jQuery的脚本下面将会使用jQuery语法编写脚本
JS脚本
实现级联查询的核心代码
var $select_academy $(#select-academy);
var $select_subject $(#select-subject);$select_academy.change(function () {var selected_academy_id $(#select-academyoption:selected).val();$.get(subjectField, {academyId:selected_academy_id}, function (resp) {$select_subject.empty();$.each(resp, function (i, e) {$select_subject.append(option valuee.ide.name/option);});}, json);
});监听学院下拉框选择发生改变change获取被选中selected的学院的value值即学院的id以get方式发送ajax请求参数为学院id号academyId首先将科目下拉框原有内容清空empty再向其中添加append被选中的学院对应开设的科目集resp为服务器端返回的数据格式为json数组
Servlet
package com.exposerain.controller;import com.exposerain.dao.SubjectDao;
import com.exposerain.entity.Subject;
import com.fasterxml.jackson.databind.ObjectMapper;import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;public class SubjectFieldServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {SubjectDao dao new SubjectDao();Integer academyId Integer.valueOf(request.getParameter(academyId));ListSubject list dao.field(academyId);//jackson.jarObjectMapper om new ObjectMapper();String json om.writeValueAsString(list);response.setContentType(application/json;charsetutf-8);PrintWriter out response.getWriter();out.println(json);out.flush();out.close();}Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {}
}从请求对象中获取参数academyId的值作为学院id号根据学院id号获取对应开设的科目列表listDAO中方法具体见下文将科目列表转化为json格式的字符串这里采用的是jackson.jar包里的方法设置响应对象文本格式并发送json字符串
DAO
SubjectDao
package com.exposerain.dao;import com.exposerain.entity.Subject;
import com.exposerain.util.JdbcUtil;import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;public class SubjectDao {private JdbcUtil util new JdbcUtil();public ListSubject field(Integer academyId){ListSubject list new ArrayList();String sql select * from Subject where acId ?;PreparedStatement ps util.createStatement(sql);ResultSet rs null;try {ps.setInt(1,academyId);rs ps.executeQuery();while(rs.next()){Integer id rs.getInt(subId);String name rs.getString(subName);Integer acId rs.getInt(acId);Subject subject new Subject(id, name, acId);list.add(subject);}} catch (SQLException throwables) {throwables.printStackTrace();} finally {util.close(rs);}return list;}
}其中的JdbcUtil为JDBC工具类用于连接数据库、发送SQL命令至数据库等功能不再赘述。
初始化
目前直接进入网页两级的下拉框都还是空的因此要对其进行初始化。
var $select_academy $(#select-academy);
var $select_subject $(#select-subject);
var selected_academy_id null;
//初始化学院下拉框
$.ajax({url:academyField,async:false, //同步success:function (resp) {$.each(resp, function (i, e) {$select_academy.append(option valuee.ide.name/option);});$select_academy.children().eq(0).attr(selected, true);},dataType:json
});
selected_academy_id $(#select-academyoption:selected).val();
$.get(subjectField, {academyId:selected_academy_id}, function (resp) {$.each(resp, function (i, e) {$select_subject.append(option valuee.ide.name/option);});
}, json);
//初始化完毕首先发送ajax请求加载出第一级学院下拉框再将其中的首个学院选中由于要根据选中的元素提取value值作为学院id号因此选中操作必须在提取操作之前执行因此采用同步async:false的方式发送请求同步的方式缺点是速度慢第二级下拉框肉眼可见地比第一级加载慢一瞬间这里可以将提取操作改为直接赋被选中的学院的id确值即selected_academy_id 1;然后便可用异步的方式请求不过可维护性差一点接着是将级联查询静态执行一遍用于初始化加载科目下拉框
初始页面
