如何在 ajax ( JSP ) 中传递选定的下拉值？答案

【问题标题】：How to pass selected dropdown value in ajax ( JSP )?如何在 ajax ( JSP ) 中传递选定的下拉值？
【发布时间】：2016-11-26 06:20:46
【问题描述】：

我

n 我的网络应用程序我正在使用动态下拉列表进行选择班级，部门和学生ID。选择班级时下拉列表根据选择的类填充。类似地在 student_id 通过获取班级和部门来填充下拉列表。

我的问题是不能同时把class值和division值传给jsp页面..

我的 Home.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 代码是..

<%@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 代码是...

   <%-- 
    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);
      }

谁能帮我找到一个解决方案..提前谢谢...

【问题讨论】：

标签： ajax jsp dropdown

【解决方案1】：

要通过 URL 传递多个参数，您需要使用正确的 URL 编码。

var url="studid.jsp";
url +="?passdivision=" +encodeURI(str);
url +="&passclass=" +encodeURI(xclass);

请注意，附加参数由 & 分隔，并且 encodeURI 函数将对您的数据进行 URL 编码。

还可以考虑使用准备好的语句，因为您的 SQL 查询存在明显的 SQL 注入漏洞。

【讨论】：

代码正在运行，但我无法从下拉列表（类值）中获取所选值。那是在传递类名的同时。无法获取 xclass 值。我已经更新了我的代码，请注意
Jithin，您没有将选择框上的 id 属性设置为 class，您只设置了名称，因此 getElementById 只会返回 null。将 id='class' 添加到您的选择元素中，它应该可以工作。