DDR爱好者之家

运用JSP+ajax实现分类查询功能的实例代码
站长资源 2024/11/24 佚名
38 1538
DDR爱好者之家 Design By 杰米

本文主要是介绍了运用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, 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
          + "'>了解更多</a></td>");
    }
    out.println("</table>");
  %>
  </div>
</body>
</html>
    out.println("</table>");
  %>
  </div>
</body>
</html>

运行界面如下：

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

然后在另一个界面处理请求，利用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
          + "'>了解更多</a></td>");
    }
    out.println("</table>");
  %>  
 </body>
</html>

实现效果：

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

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米