コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

JSP+ajaxを利用した分類クエリ機能実装サンプルコード

韦小宝
リリース： 2018-01-18 09:54:39
オリジナル
1756 人が閲覧しました

この記事では主にJSP+ajaxを使って分類クエリ機能を実装するサンプルコードを紹介していますので、JSPを学ぶ上で参考になる内容です

今回は大学についてです。初学期中に、情報管理システムコースの設計において卒業生が遭遇したいくつかの問題と解決策を記録し、共有します。

タイトル要件: 企業の採用情報 (今年または前年) のクエリ機能を提供します。

まずデータベース情報を表示するための 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: &#39;trebuchet MS&#39;, &#39;Lucida sans&#39;, 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>

  <p align="right">
    <input type="text" name="year" id="year">
    <input type="button" value="按年度查询" onclick="loadHtml(document.getElementById(&#39;year&#39;).value)">
  </p>
  <p 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=&#39;zebra&#39;>");
    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=&#39;EEI_show.jsp?Eid=" + Eid
          + "&#39;>了解更多</a></td>");
    }
    out.println("</table>");
  %>
  </p>
</body>
</html>
    out.println("</table>");
  %>
  </p>
</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: &#39;trebuchet MS&#39;, &#39;Lucida sans&#39;, 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 &#39;"+str+"%&#39;";
    ResultSet rs = sd.query(sql);
    out.println("<table class=&#39;zebra&#39;>");
    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=&#39;EEI_show.jsp?Eid=" + Eid
          + "&#39;>了解更多</a></td>");
    }
    out.println("</table>");
  %>  
 </body>
</html>
ログイン後にコピー

実装の効果:

JSP+ajaxを利用した分類クエリ機能実装サンプルコード

以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです！ ！

関連する推奨事項:

JSP 開発環境を構築する方法

jsp で URL の値を送受信する

動的ページを作成する方法 - JSP と Java コードを使用する

以上がJSP+ajaxを利用した分類クエリ機能実装サンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
javascript クエリ機能
ソース：php.cn
前の記事：JSPページ間の値の転送方法のまとめ 次の記事：JSP開発におけるSpringメソッドインジェクションの置換メソッド実装
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート