【Web开发】级联查询（Ajax/ jQuery/ Servlet)
生活随笔
收集整理的這篇文章主要介紹了
【Web开发】级联查询（Ajax/ jQuery/ Servlet)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
實現(xiàn)級聯(lián)查詢
共有兩個下拉框，第一級為學(xué)院，第二級為學(xué)院開設(shè)的科目。
實現(xiàn)的功能為：當(dāng)改變學(xué)院的選擇，第二級下拉框需變?yōu)閷?yīng)學(xué)院開設(shè)的科目內(nèi)容。
結(jié)果預(yù)覽：
jsp頁面
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <!DOCTYPE html> <html> <head><title>JSP - Hello World</title><script type="text/javascript" src="js/jquery-3.6.0.min.js"></script><script type="text/javascript" src="js/index.js"></script> </head> <body> 學(xué)院： <select name="academy" id="select-academy"></select> 科目： <select name="subject" id="select-subject"></select> </body> </html>其中導(dǎo)入了jQuery的腳本，下面將會使用jQuery語法編寫腳本
JS腳本
實現(xiàn)級聯(lián)查詢的核心代碼：
var $select_academy = $("#select-academy"); var $select_subject = $("#select-subject");$select_academy.change(function () {var selected_academy_id = $("#select-academy>option:selected").val();$.get("subjectField", {"academyId":selected_academy_id}, function (resp) {$select_subject.empty();$.each(resp, function (i, e) {$select_subject.append("<option value='"+e.id+"'>"+e.name+"</option>");});}, "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"));List<Subject> list = dao.field(academyId);//jackson.jarObjectMapper om = new ObjectMapper();String json = om.writeValueAsString(list);response.setContentType("application/json;charset=utf-8");PrintWriter out = response.getWriter();out.println(json);out.flush();out.close();}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {} }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 List<Subject> field(Integer academyId){List<Subject> 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工具類用于連接數(shù)據(jù)庫、發(fā)送SQL命令至數(shù)據(jù)庫等功能，不再贅述。
初始化
目前直接進(jìn)入網(wǎng)頁兩級的下拉框都還是空的，因此要對其進(jìn)行初始化。
var $select_academy = $("#select-academy"); var $select_subject = $("#select-subject"); var selected_academy_id = null; //初始化學(xué)院下拉框 $.ajax({url:"academyField",async:false, //同步success:function (resp) {$.each(resp, function (i, e) {$select_academy.append("<option value='"+e.id+"'>"+e.name+"</option>");});$select_academy.children().eq(0).attr("selected", "true");},dataType:"json" }); selected_academy_id = $("#select-academy>option:selected").val(); $.get("subjectField", {"academyId":selected_academy_id}, function (resp) {$.each(resp, function (i, e) {$select_subject.append("<option value='"+e.id+"'>"+e.name+"</option>");}); }, "json"); //初始化完畢初始頁面：
總結(jié)
以上是生活随笔為你收集整理的【Web开发】级联查询（Ajax/ jQuery/ Servlet)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： “素景缘隟流”下一句是什么
- 下一篇： 【汇编语言】状态标志符(CF/OF/SF