データベースのリアルタイム検索に ajax を使用しており、サーバー コードとして JSP も使用しています。しかし、アプリケーションを実行しようとすると、検索結果が表示されません。Ajax コード
function Search(){
if (window.XMLHTTPRequest){
xmlresults = new XMLHttRequest();
}else{
xmlresults = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlresults.onreadystatechange = function (){
if(xmlresults.readyState == 4 && xmlresults.status == 200){
document.getElementById('searchResults').innerHTML = xmlresults.responseText;
}
}
xmlresults.open('GET','searchR.jsp?seb='+ document.form1.seb.value,true);
xmlresults.send();
}
検索ボックスに入力された内容に応じてデータベースのクエリを実行する JSP コードです。変数を宣言し、java.sql.* パッケージをインポートした後、以下のコードを試してください。
try{
Class.forName("com.mysql.jdbc.Driver");
con = DriverManager.getConnection("jdbc:mysql://localhost/search","root","root");
query = "select * from result";
// query = "select * from result where seb like '"+seb+"%'";
ps = con.prepareStatement(query);
rs = ps.executeQuery();
if(rs.next()){
%>
<div >
<%=rs.getString("seb")%>
</div>
<%
}
}catch(Exception e){
out.println("Error "+e);
}
%>
検索クエリの表示を行うページ。フォーム要素を使用しています。
<form name="form1" id="form1" method="GET">
<table width="638" height="38" border="0">
<tr>
<td><span id="sprytextfield1">
<input name="seb" type="text" id="seb" size="75" autocomplete="on" placeholder="Enter into Search box" style="line-height: 25px; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight: 700; font-size: 15px; border-radius: 9px; box-shadow: #F3F3F3 0.1em 0.1em 0.3em 0.1em; border-color: #F5F5F5;" onKeyUp="Search();">
<span class="textfieldRequiredMsg">A value is required.</span></span> <input type="submit" name="Search" id="Search" value="Search" style="height:30px;"></td>
</tr>
</table>
</form>
<table width="588" border="0">
<div id="searchResults">
</div>
</table>
データベースのクエリを実行する JSP コードの名前は searchR.jsp であり、これも ajax コードで指定/呼び出され、テキスト フィールドの ID は seb であり、表示される div タグの ID であることに注意してください。検索テキスト フィールドに入力した後は、ajax コードでも使用されている searchResults です。