當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

【Web开发】级联查询（Ajax/ jQuery/ Servlet)

發(fā)布時(shí)間：2023/12/1 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了【Web开发】级联查询（Ajax/ jQuery/ Servlet) 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

實(shí)現(xiàn)級(jí)聯(lián)查詢

共有兩個(gè)下拉框，第一級(jí)為學(xué)院，第二級(jí)為學(xué)院開設(shè)的科目。
實(shí)現(xiàn)的功能為：當(dāng)改變學(xué)院的選擇，第二級(jí)下拉框需變?yōu)閷?duì)應(yīng)學(xué)院開設(shè)的科目?jī)?nèi)容。

結(jié)果預(yù)覽：

jsp頁(yè)面

<%@ 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的腳本，下面將會(huì)使用jQuery語(yǔ)法編寫腳本

JS腳本

實(shí)現(xiàn)級(jí)聯(lián)查詢的核心代碼：

監(jiān)聽學(xué)院下拉框選擇發(fā)生改變change

獲取被選中（selected）的學(xué)院的value值即學(xué)院的id

以get方式發(fā)送ajax請(qǐng)求，參數(shù)為學(xué)院id號(hào)academyId

首先將科目下拉框原有內(nèi)容清空empty

再向其中添加append被選中的學(xué)院對(duì)應(yīng)開設(shè)的科目集，resp為服務(wù)器端返回的數(shù)據(jù)，格式為json數(shù)組

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 {} }

從請(qǐng)求對(duì)象中獲取參數(shù)academyId的值作為學(xué)院id號(hào)

根據(jù)學(xué)院id號(hào)獲取對(duì)應(yīng)開設(shè)的科目列表list（DAO中方法具體見下文）

將科目列表轉(zhuǎn)化為json格式的字符串（這里采用的是jackson.jar包里的方法）

設(shè)置響應(yīng)對(duì)象文本格式并發(fā)送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 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ù)庫(kù)、發(fā)送SQL命令至數(shù)據(jù)庫(kù)等功能，不再贅述。

初始化

目前直接進(jìn)入網(wǎng)頁(yè)兩級(jí)的下拉框都還是空的，因此要對(duì)其進(jìn)行初始化。

首先發(fā)送ajax請(qǐng)求加載出第一級(jí)學(xué)院下拉框，再將其中的首個(gè)學(xué)院選中，由于要根據(jù)選中的元素提取value值作為學(xué)院id號(hào)，因此選中操作必須在提取操作之前執(zhí)行，因此采用同步（async:false）的方式發(fā)送請(qǐng)求，同步的方式缺點(diǎn)是速度慢，第二級(jí)下拉框肉眼可見地比第一級(jí)加載慢一瞬間（這里可以將提取操作改為直接賦被選中的學(xué)院的id確值即selected_academy_id = 1;然后便可用異步的方式請(qǐng)求，不過可維護(hù)性差一點(diǎn)）

接著是將級(jí)聯(lián)查詢靜態(tài)執(zhí)行一遍用于初始化加載科目下拉框

初始頁(yè)面：

總結(jié)

以上是生活随笔為你收集整理的【Web开发】级联查询（Ajax/ jQuery/ Servlet)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。