0

mysql 、 india_states 、および india_cities に 2 つのテーブルを作成しました。india_states には 4 つの州があり、india_cities には 16 の都市名がある mysql 自体から値を挿入しました。これは、india_states テーブルのマハラシュトラ州の 1 つの州が india_cities テーブルに 4 つの都市を持っていることを意味します。jquery を使用して HTML ページでドロップダウンに状態を表示することに成功しました。以下は状態のコードです。

$(document).ready(function(){
var states_name="";
$.ajax({
     type: 'GET', 
        url: 'http://localhost:8082/JqueryForm/html/jsp/states_name.jsp', 
        data: { get_param: 'value' }, 
        dataType: 'json',
        success: function (data) { 
        var select = $('#select_states').empty();
              $.each(data, function(i) {
                  states_name = data[i].state_name;
                  console.log("states_name:" + states_name);
                  select.append('<option value="'
                          + states_name
                          + '">'
                          + states_name
                          + '</option>')
                 });
             }
      });
});

今私がやりたいことは、マハラシュトラを選択すると、他のドロップダウンにマハラシュトラに関連する 4 つの都市のみが自動的に表示されるはずです。そのため、states_id を india_cities テーブルに入れました。次の URL に基づいて、都市を json ビューで表示するために使用される jsp ページも作成しました。

http://localhost:8082/JqueryForm/html/jsp/city_names.jsp?states_id=1

{
1: {
city_name: "Mumbai"
},
2: {
city_name: "Pune"
},
3: {
city_name: "Thane"
},
4: {
city_name: "Navi Mumbai"
}
}

そして、これが上記の私のjqueryコードです

$(document).ready(function(){
$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=
    ([^&#]*)').exec(window.location.href);
    if (results==null){
       return null;
    }
    else{
       return results[1] || 0;
    }
}
var states_id = $.urlParam('states_id');
var cities_name="";
$.ajax({
     type: 'GET', 
        url: 'http://localhost:8082/JqueryForm/html/jsp/city_names.jsp', 
        data: { states_id: states_id }, 
        dataType: 'json',
        success: function (data) { 
        var select = $('#select_cities').empty();
              $.each(data, function(i) {
                  cities_name = data[i].city_name;
                  console.log("cities_name:" + cities_name);
                  select.append('<option value="'
                         + cities_name
                         + '">'
                         + cities_name
                         + '</option>')
            });
         }
     });
});

india_states.jsp

<%
JSONObject finalJSON = new JSONObject();
Sql_Server details = new Sql_Server();
request.setCharacterEncoding("utf8");
response.setContentType("application/json");
List<String> list = details.getIndiaStates();
int recordCounter = 1;
JSONArray jArray = new JSONArray();
for (int i = 0; i < list.size(); i++) {
    JSONObject formDetailsJson = new JSONObject();
    formDetailsJson.put("state_name", list.get(i));
    finalJSON.put(recordCounter, formDetailsJson);
    ++recordCounter;
}
out.println(finalJSON.toString());

%>

「1」を入れる代わりにstates_id、マハラシュトラ州の値が表示されますが、states_id を動的に取得するにはどうすればよいですか? したがって、最初のドロップダウンの値に基づいて他のドロップダウンを設定するには、助けが必要です。ありがとうございました

4

2 に答える 2

2

Java側に問題があります。jsp で json 配列を作成するには、次のコード スニペットを使用します。

JSONArray cellarray = new JSONArray();
JSONObject cellobj = null; //new JSONObject();
int state_id=request.getParameter("state_id");

try{
    // Do not open DB connection like this, this is for your understanding
    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 city where state_id='"+state_id+"'  ");
    while(rs.next()){
        cellobj = new JSONObject();
        //concatinate id with string
        cellobj.put("citi_name", rs.getString(1) +"#"+ rs.getString(3));
        cellarray.add(cellobj);
    }  
    System.out.println(cellarray);
}
catch(Exception e){
     System.out.println(e);
}

ここで db からデータを取得し、それを json 配列に追加します。このjspページはjson配列を(111#Tamilnadu) - expected formatajaxに返します。後で繰り返すことができます。

于 2015-03-31T06:43:26.470 に答える