Question

我有一个包含两个下拉列表的表单的Jsp页面，第一个用于显示国家名称，第二个用于显示相应国家/地区下的状态。我的Mysql数据库分别包含两个表国家和州。我需要使用Ajax从数据库填充两个下拉列表，其中数据库中的数据必须转换为Json对象并作为Json对象给出响应。然后根据此响应填充两个下拉列表Json对象。不使用任何php或.net代码在这里给我一些使用Ajax在Jsp中执行此操作的示例代码.Below是我到目前为止所做的代码。但是这里第二个下拉列表没有填充。

country.jsp

<%@page import="java.sql.*"%>
<html>
  <head>  
  <script language="javascript" type="text/javascript">  
  var xmlHttp;  

  function showState(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="state.jsp";
  url +="?count=" +str;
  xmlHttp.onreadystatechange = stateChange;
  xmlHttp.open("GET", url, true);
  xmlHttp.send(null);
  }

  function stateChange(){   
  if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){   
  var myJson=new JSONObject(xmlHttp.responseText);
  console.log($(this).val());
  $("#state").empty();
  $("#state").append('<option value="-1">-Select State-</option>');
  $.each(myJson.arrayName, function (index, value) {
        $("#state").append('<option value="'+value.id+'">'+value.name+'</option>');
     });
        }   
  }
  </script>  
  </head>  
  <body>  
  <select name='country' onchange="showState(this.value)">  
   <option value="none">Select</option>  
<%ResultSet rs=null;
    try{
Class.forName("com.mysql.jdbc.Driver").newInstance();  
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:
3306/test","root","root");  
Statement stmt = con.createStatement();  
rs = stmt.executeQuery("Select * from country");


while(rs.next()){
 %>
  <option value="<%=rs.getString(1)%>"><%=rs.getString(2)%></option>  
  <%
}}catch(Exception e){
    }
 %>
  </select>  
  <br>  
  <div id='sta'>  
  <select id='state' name='statess' >  
  <option value='-1'>select</option>  
  </select>  
  </div>  
  </body> 
  </html>

state.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*"%>
<%@page import="java.util.*,java.util.ArrayList"%>
<%@page import="net.sf.json.JSONObject"%>
<%@page import="net.sf.json.JSONArray"%>
<%
JSONArray cellarray = new JSONArray();
JSONObject cellobj = null; //new JSONObject();
JSONObject jo=new JSONObject();
String country=request.getParameter("count");  
try{
Class.forName("com.mysql.jdbc.Driver").newInstance();  
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:
3306/test","root","root");  
Statement stmt = con.createStatement();  
ResultSet rs = stmt.executeQuery("Select * from 
state where countryid='"+country+"'");  
while(rs.next()){
    cellobj = new JSONObject();
    cellobj.put("id", rs.getString(1));
    cellobj.put("name", rs.getString(3));
    cellarray.add(cellobj);
}  
jo.put("arrayName",cellarray);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(jo.toString());
}
catch(Exception e){
System.out.println(e);
}
%>

Answer 1

您可以在state.jsp页面中尝试这样的方法来获取json数组数据。请记住，您需要添加json-lib-x.x.x jar文件才能完成此操作。

<%@page import="java.sql.ResultSet"%>
<%@page import="java.util.*,java.util.ArrayList"%>
<%@page import="net.sf.json.JSONObject"%>
<%@page import="net.sf.json.JSONArray"%>
<%
JSONArray cellarray = new JSONArray();
JSONObject cellobj = null; //new JSONObject();

try{
    Class.forName("com.mysql.jdbc.Driver").newInstance();  
    Connection con = DriverManager.getConnection("jdbc:mysql://localhost:
    3306/test","root","root");  
    Statement stmt = con.createStatement();  
    ResultSet rs = stmt.executeQuery("Select * from state where 
    countryid='"+country+"'  ");  
    while(rs.next()){
        cellobj = new JSONObject();
        cellobj.put("id", rs.getString(1));
        cellobj.put("state", rs.getString(3));
        cellarray.add(cellobj);
    }  
    out.println(cellarray);
}
catch(Exception e){
 System.out.println(e);
}
%>

还有一个建议，尝试使用JSTL或EL而不是scriptlet。如果这有帮助，请告诉我。

Answer 2

    $('#StateID').change(function(){
              var id=$(this).val();
              var dataString = 'id='+ id;
              $.ajax
              ({
                  type: "POST",
                  url: "city_loaddata.php",
                  data: dataString,
                  beforeSend: function() {
                  $("#uniform-CityID span").text("પસંદ કરો..");
                    },
                  cache: false,
                  success: function(html)
                  {
                      $("#CityID").html(html);
                  }
              });
        });



//city_loaddata


if($_POST['id']){
                $id = $_POST['id'];
                $SelectCity = $obj->sql_query("select * from tbl_city where StateID='".$id."'");

                echo '<option selected="selected" value="">પસંદ કરો</option>';
                for($i=0; $i<count($SelectCity); $i++)
                {
                    $CityZoneID = $SelectCity[$i]['CityID'];
                    $CityZoneName = $SelectCity[$i]['CityName'];

                    echo  '<option value="'.$CityZoneID.'">'.$CityZoneName.'</option>';

                }
        }

使用ajax的相关下拉列表

2 个答案: