运用JSP+ajax实现分类查询功能的实例代码

发布时间 - 2026-01-11 02:17:49    点击率：次

本文主要是介绍了运用JSP+ajax实现分类查询功能的实例代码，分享给大家供大家参考，具体如下：

这次是对小学期关于大学毕业生信息管理系统课程设计中遇到的一些问题和解决方法进行记录和分享。

题目要求：提供企业招聘信息（本年度或历年）查询功能；

首先建立一个jsp文件用来显示数据库信息，并在上面加输入条件的文本框和查询按钮，在这个jsp文件中需要完成一个js函数在用于完成查询功能。

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="java.sql.*"%>
<%@ page import="TestSQL.SelectDB"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>企业招聘信息</title>
<style>
body {
  width: 600px;
  margin: 40px auto;
  font-family: 'trebuchet MS', 'Lucida sans', Arial;
  font-size: 14px;
  color: #444;
}

table {
  *border-collapse: collapse; /* IE7 and lower */
  border-spacing: 0;
  width: 100%;
}

/*----------------------*/
.zebra td,.zebra th {
  padding: 10px;
  border-bottom: 1px solid #f2f2f2;
}

.zebra tbody tr:nth-child(even) {
  background: #f5f5f5;
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
}

.zebra th {
  text-align: left;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  border-bottom: 1px solid #ccc;
  background-color: #eee;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5),
    to(#eee));
  background-image: -webkit-linear-gradient(top, #f5f5f5, #eee);
  background-image: -moz-linear-gradient(top, #f5f5f5, #eee);
  background-image: -ms-linear-gradient(top, #f5f5f5, #eee);
  background-image: -o-linear-gradient(top, #f5f5f5, #eee);
  background-image: linear-gradient(top, #f5f5f5, #eee);
}

.zebra th:first-child {
  -moz-border-radius: 6px 0 0 0;
  -webkit-border-radius: 6px 0 0 0;
  border-radius: 6px 0 0 0;
}

.zebra th:last-child {
  -moz-border-radius: 0 6px 0 0;
  -webkit-border-radius: 0 6px 0 0;
  border-radius: 0 6px 0 0;
}

.zebra th:only-child {
  -moz-border-radius: 6px 6px 0 0;
  -webkit-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
}

.zebra tfoot td {
  border-bottom: 0;
  border-top: 1px solid #fff;
  background-color: #f1f1f1;
}

.zebra tfoot td:first-child {
  -moz-border-radius: 0 0 0 6px;
  -webkit-border-radius: 0 0 0 6px;
  border-radius: 0 0 0 6px;
}

.zebra tfoot td:last-child {
  -moz-border-radius: 0 0 6px 0;
  -webkit-border-radius: 0 0 6px 0;
  border-radius: 0 0 6px 0;
}

.zebra tfoot td:only-child {
  -moz-border-radius: 0 0 6px 6px;
  -webkit-border-radius: 0 0 6px 6px border-radius: 0 0 6px 6px
}
</style>
<!-- 
*
*
*此处为重点
*
*
*
 -->
<script type="text/javascript">
//按年度查询，执行
  var xmlhttp;
  function loadHtml(str) {
    xmlhttp = null;
    if (window.XMLHttpRequest()) {
      xmlhttp = new XMLHttpRequest();
    } else {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
      if(xmlhttp.readyState==4&&xmlhttp.status==200)
      {
        document.getElementById("zpxx").innerHTML=xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET", "EEIMSelect.jsp?str="+str, true);
    xmlhttp.send();
  }
</script>
<!-- 
*
*
*此处为重点
*
*
*
 -->
</head>
<body>

  <div align="right">
    <input type="text" name="year" id="year">
    <input type="button" value="按年度查询" onclick="loadHtml(document.getElementById('year').value)">
  </div>
  <div id="zpxx">
  <%
  request.setCharacterEncoding("utf-8");
    SelectDB sd = new SelectDB();
    String sql = "SELECT * FROM [EIMS].[dbo].[EEIM]";
    ResultSet rs = sd.query(sql);
    out.println("<table class='zebra'>");
    out.println("<tr><td>公司名字</td><td>招聘岗位</td><td>招聘人数</td><td>工作地点</td><td>要求</td><td>工资</td><td>电话</td><td>日期</td></tr>");
    while (rs.next()) {
      int Eid = Integer.parseInt(rs.getString("Eid"));
      out.println("<tr>");
      out.println("<td>" + rs.getString("Ename") + "</td>");
      out.println("<td>" + rs.getString("Jvac") + "</td>");
      out.println("<td>" + rs.getString("Num") + "</td>");
      out.println("<td>" + rs.getString("Workplace") + "</td>");
      out.println("<td>" + rs.getString("Requirement") + "</td>");
      out.println("<td>" + rs.getString("Salary") + "</td>");
      out.println("<td>" + rs.getString("Tel") + "</td>");
      out.println("<td>" + rs.getString("Year") + "</td>");
      out.println("<td><a href='EEI_show.jsp?Eid=" + Eid
          + "'>了解更多</a></td>");
    }
    out.println("</table>");
  %>
  </div>
</body>
</html>
    out.println("</table>");
  %>
  </div>
</body>
</html>

运行界面如下：

然后在另一个界面处理请求，利用ajax技术可实现同步刷新，代码如下：

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ page import="java.sql.*" %>
<%@ page import="TestSQL.SelectDB" %>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>企业招聘信息</title>
  <style>

body {
  width: 600px;
  margin: 40px auto;
  font-family: 'trebuchet MS', 'Lucida sans', Arial;
  font-size: 14px;
  color: #444;
}

table {
  *border-collapse: collapse; /* IE7 and lower */
  border-spacing: 0;
  width: 100%;  
}


/*----------------------*/

.zebra td, .zebra th {
  padding: 10px;
  border-bottom: 1px solid #f2f2f2;  
}

.zebra tbody tr:nth-child(even) {
  background: #f5f5f5;
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
  -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset; 
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;    
}

.zebra th {
  text-align: left;
  text-shadow: 0 1px 0 rgba(255,255,255,.5); 
  border-bottom: 1px solid #ccc;
  background-color: #eee;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eee));
  background-image: -webkit-linear-gradient(top, #f5f5f5, #eee);
  background-image:  -moz-linear-gradient(top, #f5f5f5, #eee);
  background-image:   -ms-linear-gradient(top, #f5f5f5, #eee);
  background-image:   -o-linear-gradient(top, #f5f5f5, #eee); 
  background-image:     linear-gradient(top, #f5f5f5, #eee);
}

.zebra th:first-child {
  -moz-border-radius: 6px 0 0 0;
  -webkit-border-radius: 6px 0 0 0;
  border-radius: 6px 0 0 0; 
}

.zebra th:last-child {
  -moz-border-radius: 0 6px 0 0;
  -webkit-border-radius: 0 6px 0 0;
  border-radius: 0 6px 0 0;
}

.zebra th:only-child{
  -moz-border-radius: 6px 6px 0 0;
  -webkit-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
}

.zebra tfoot td {
  border-bottom: 0;
  border-top: 1px solid #fff;
  background-color: #f1f1f1; 
}

.zebra tfoot td:first-child {
  -moz-border-radius: 0 0 0 6px;
  -webkit-border-radius: 0 0 0 6px;
  border-radius: 0 0 0 6px;
}

.zebra tfoot td:last-child {
  -moz-border-radius: 0 0 6px 0;
  -webkit-border-radius: 0 0 6px 0;
  border-radius: 0 0 6px 0;
}

.zebra tfoot td:only-child{
  -moz-border-radius: 0 0 6px 6px;
  -webkit-border-radius: 0 0 6px 6px
  border-radius: 0 0 6px 6px
}

</style>
 </head>
 <body>
  <%
     request.setCharacterEncoding("utf-8");
    String str=request.getParameter("str");

    SelectDB sd = new SelectDB();
    String sql = "SELECT * FROM [EIMS].[dbo].[EEIM] where Year like '"+str+"%'";
    ResultSet rs = sd.query(sql);
    out.println("<table class='zebra'>");
    out.println("<tr><td>公司名字</td><td>招聘岗位</td><td>招聘人数</td><td>工作地点</td><td>要求</td><td>工资</td><td>电话</td><td>日期</td></tr>");
    while (rs.next()) {
    int Eid=Integer.parseInt(rs.getString("Eid"));
      out.println("<tr>");
      out.println("<td>" + rs.getString("Ename") + "</td>");
      out.println("<td>" + rs.getString("Jvac") + "</td>");
      out.println("<td>" + rs.getString("Num") + "</td>");
      out.println("<td>" + rs.getString("Workplace") + "</td>");
      out.println("<td>" + rs.getString("Requirement") + "</td>");
      out.println("<td>" + rs.getString("Salary") + "</td>");
      out.println("<td>" + rs.getString("Tel") + "</td>");
      out.println("<td>" + rs.getString("Year") + "</td>");
      out.println("<td><a href='EEI_show.jsp?Eid=" + Eid
          + "'>了解更多</a></td>");
    }
    out.println("</table>");
  %>  
 </body>
</html>

实现效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


# ajax实现分类查询  # JSP分类查询  # JSP  # ajax  # 分类查询  # jsp页面验证码完整实例  # JSP实用教程之简易文件上传组件的实现方法（附源码）  # JSP实用教程之简易图片验证码的实现方法（附源码）  # JSP中springmvc配置validator的注意事项  # JSP 开发之Spring Boot 动态创建Bean  # 详解SpringBoot集成jsp（附源码）+遇到的坑  # jsp按格式导出doc文件实例详解  # 查询功能  # 企业招聘信息  # 按年  # 在这个  # 为重点  # 并在  # 给大家  # 建立一个  # 解决方法  # 大家多多  # 文本框  # 信息管理系统  # 主要是  # font  # family  # auto  # trebuchet  # sans  # Arial  # MS 


相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】


相关推荐： laravel怎么配置Redis作为缓存驱动_laravel Redis缓存配置教程  如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗？  Laravel如何发送系统通知_Laravel Notifications实现多渠道消息通知  Laravel如何实现密码重置功能_Laravel密码找回与重置流程  如何在 React 中条件性地遍历数组并渲染元素  Internet Explorer官网直接进入 IE浏览器在线体验版网址  WordPress 子目录安装中正确处理脚本路径的完整指南  Laravel Livewire是什么_使用Laravel Livewire构建动态前端界面  Laravel如何实现多表关联模型定义_Laravel多对多关系及中间表数据存取【方法】  百度输入法ai面板怎么关 百度输入法ai面板隐藏技巧  Laravel如何实现本地化和多语言支持？（i18n教程）  魔毅自助建站系统：模板定制与SEO优化一键生成指南  微博html5版本怎么弄发超话_超话进入入口及发帖格式要求【教程】  Laravel怎么返回JSON格式数据_Laravel API资源Response响应格式化【技巧】  如何用虚拟主机快速搭建网站？详细步骤解析  家族网站制作贴纸教程视频,用豆子做粘帖画怎么制作？  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  php在windows下怎么调试_phpwindows环境调试操作说明【操作】  详解Android——蓝牙技术 带你实现终端间数据传输  Laravel如何集成Inertia.js与Vue/React？（安装配置）  如何在IIS管理器中快速创建并配置网站？  如何制作一个表白网站视频,关于勇敢表白的小标题？  Laravel如何使用Collections进行数据处理？（实用方法示例）  为什么要用作用域操作符_php中访问类常量与静态属性的优势【解答】  微信小程序 scroll-view组件实现列表页实例代码  Laravel Eloquent模型如何创建_Laravel ORM基础之Model创建与使用教程  JavaScript常见的五种数组去重的方式  如何快速建站并高效导出源代码？  详解阿里云nginx服务器多站点的配置  jQuery validate插件功能与用法详解  详解Oracle修改字段类型方法总结  Laravel怎么使用Markdown渲染文档_Laravel将Markdown内容转HTML页面展示【实战】  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗？  JavaScript如何实现错误处理_try...catch如何捕获异常？  如何用免费手机建站系统零基础打造专业网站？  php静态变量怎么调试_php静态变量作用域调试技巧【解答】  利用python获取某年中每个月的第一天和最后一天  Laravel如何使用Spatie Media Library_Laravel图片上传管理与缩略图生成【步骤】  消息称 OpenAI 正研发的神秘硬件设备或为智能笔，富士康代工  Microsoft Edge如何解决网页加载问题 Edge浏览器加载问题修复  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  Win11怎么恢复误删照片_Win11数据恢复工具使用【推荐】  Laravel模型事件有哪些_Laravel Model Event生命周期详解  在线制作视频的网站有哪些,电脑如何制作视频短片？  Laravel怎么创建控制器Controller_Laravel路由绑定与控制器逻辑编写【指南】  详解Huffman编码算法之Java实现  Laravel如何实现用户角色和权限系统_Laravel角色权限管理机制  桂林网站制作公司有哪些,桂林马拉松怎么报名？  Laravel如何实现文件上传和存储？（本地与S3配置）  Laravel广播系统如何实现实时通信_Laravel Reverb与WebSockets实战教程 

上一篇：【Linux】项目日志——输出重定向

下一篇：SEO优化工具+智能关键词生成器整合，打造高效快速建站系统

相关栏目 网站优化
网络推广
网络技术
AI营销
最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路 如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整 塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公 纸嫁衣8千子树第五章庙门怎么开启 庙门 Laravel 多行数据编辑表单中实现逐 明日之后如何提升钓鱼等级 明日之后提升钓 支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：【Linux】项目日志——输出重定向

下一篇：SEO优化工具+智能关键词生成器整合，打造高效快速建站系统

©  宿州市腾雀网络科技有限公司 版权所有  皖ICP备2024054708号 

宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司