Iajax(JSP)で選択されたドロップダウン値を渡す方法は?
n iは クラス、分裂とSTUDENT_IDを選択するための動的なドロップダウンを使用しています私のWebアプリケーション。クラスを選択するときには、 ドロップダウンが選択されたクラスに従って塗りつぶされます。 student_idでは、クラスと除算を取得することでドロップダウンが埋められます。
私の問題は、私はJSPページに同時に階級値と分周値を渡すことができないということです。..
マイhome.jspを。コード
<%@page import="java.sql.*"%>
<%
String classs=request.getParameter("passclassname");
String bu="<select name='division' onchange='showstudid(this.value);'><option value='-1'>Select</option>";
try{
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost/demo","root","password");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("Select division_no from class1 where class='"+classs+"' ");
while(rs.next()){
bu=bu+"<option value='"+rs.getString(1)+"'>"+rs.getString(1)+"</option>";
}
bu=bu+"</select>";
response.getWriter().println(bu);
}
catch(Exception e){
System.out.println(e);
}
%>
studid.jspコード..
<%@page import="java.sql.*"%>
<html>
<head>
<script language="javascript" type="text/javascript">
var xmlHttp
var xmlHttp
function showdivision(str){
if (typeof XMLHttpRequest != "undefined"){
xmlHttp= new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp==null){
alert("Browser does not support XMLHTTP Request")
return;
}
var url="divisionn.jsp";
url +="?passclassname=" +str;
xmlHttp.onreadystatechange = divisionChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function divisionChange(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("division").innerHTML=xmlHttp.responseText
}
}
function showstudid(str){
var select = document.getElementById("class");
var classvalue = select.options[select.selectedIndex].value;
if (typeof XMLHttpRequest != "undefined"){
xmlHttp= new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp==null){
alert("Browser does not support XMLHTTP Request")
return;
}
var url="studid.jsp";
url +="?passdivision=" +encodeURI(str);
url +="&passclass=" +encodeURI(classvalue);
xmlHttp.onreadystatechange = studidchange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function studidchange(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("studid").innerHTML=xmlHttp.responseText
}
}
</script>
</head>
<body>
<table border="1">
<tr><th>Class</th><th>Division</th><th>studid</th></tr>
<tr><td>
<select name='class' onchange="showdivision(this.value)">
<option value="none">Select</option>
<%
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost/demo","root","password");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("Select class from class1");
while(rs.next()){
%>
<option value="<%=rs.getString(1)%>"><%=rs.getString(1)%></option>
<%
}
%>
</select>
</td>
<td id='division'><select name='division' >
<option value='-1'></option>
</select>
</td>
<td id='studid'> <select name='studid' >
<option value='-1'></option>
</select>
</td>
</tr>
</table>
</body>
</html>
Divisionn.jspコードされたのは、このコードは動作していない...
<%--
Document : divisionn
Created on : Nov 26, 2016, 11:13:27 AM
Author : Jithin
--%>
<%@page import="java.sql.*"%>
<%
String division=request.getParameter("passdivision");
String classs=request.getParameter("passclass");
String bu="<select name='division'><option value='-1'>---Select--</option>";
try{
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost/demo","root","password");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("Select studid from class1 where division_no='"+ division+"' and class='"+ classs+"' ");
while(rs.next()){
bu=bu+"<option value='"+rs.getString(1)+"'>"+rs.getString(1)+"</option>";
}
bu=bu+"</select>";
response.getWriter().println(bu);
}
catch(Exception e){
System.out.println(e);
}
%>
です..問題は、選択されたクラス名を渡しているコードです。
function showstudid(str){
var select = document.getElementById("class");
var classvalue = select.options[select.selectedIndex].value;
if (typeof XMLHttpRequest != "undefined"){
xmlHttp= new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp==null){
alert("Browser does not support XMLHTTP Request")
return;
}
var url="studid.jsp";
url +="?passdivision=" +encodeURI(str);
url +="&passclass=" +encodeURI(classvalue);
xmlHttp.onreadystatechange = studidchange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
誰も私はあなたが適切なURLエンコードを使用する必要がありますURLを介して複数のパラメータを渡すには... ..
コードは機能していますが、ドロップダウン(Class値)から選択した値を取得できません。それはクラス名を渡している間です。 xclass値は取得できません。私は自分のコードを更新してくださいそれを参照してください – Jithin
Jithin、あなたはgetElementByIdだけnullを返すように名前を設定するだけクラスに選択ボックスにID属性を設定していません。あなたのselect要素にid = 'class'を追加すると、それはうまくいくはずです。 –
ありがとうございました。 – Jithin