使用ajax的依赖下拉答案

【问题标题】：Dependent drop-down using ajax使用ajax的依赖下拉
【发布时间】：2014-01-03 06:34:52
【问题描述】：

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

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

【问题讨论】：

同样的问题在 2 小时内stackoverflow.com/q/20896782/1031945
上面的代码可以运行，但是我需要将响应数据替换为json格式并在代码中进行必要的修改

标签： jquery ajax json jsp

【解决方案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。让我知道这是否有帮助。

【讨论】：

那么如何使用json响应显示第二个下拉菜单？
这个fiddle可以查看，还需要关注Link1、Link2、Link3。你需要做的就是谷歌它。
请给我 country.jsp 页面的完整代码。同时编写代码以将响应（即 json 对象）发送回 country.jsp 页面，以及我应该如何使用此响应填充下拉菜单。
我们不是来为您工作的，如果您遇到任何问题，我们可以为您提供一些想法和帮助来解决。如果您使用当前代码编辑您的帖子并更新您迄今为止为实现 json 数据所做的尝试，那么我将在此处继续。
我已经编辑了上面的代码。现在请告诉我问题所在。

【解决方案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>';

                }
        }

【讨论】：