занесение выпадающего списка на основе выбора предыдущего списка с помощью Ajax

Привета, У меня есть страница JSP с формой, содержащей список два раскрывающихся,занесение выпадающего списка на основе выбора предыдущего списка с помощью Ajax

первым для показа названия страны и
второй для отображения штатов в соответствующей стране.

У меня есть база данных Mysql, содержащая две таблицы страны и состояния соответственно.

ЧТО Я ХОЧУ:

мне нужно заполнить вторую раскрывающийся из базы данных с помощью Ajax, где данные из базы данных должны быть преобразованы в объект Json и дать ответ, как Json object.Then наполнитьсетевой второго раскрывающегося списка, основанного на этом объекте Json ответа.

ВОПРОС я сталкиваюсь:

Моя проблема заключается в том, что, когда я выбираю значение в первом раскрывающемся списке второй выпадающий список заполняется значением «[объект Object], [ объект Object], [object Object] 'вместо отображения соответствующих имен состояний.

Кто-то пожалуйста, помогите мне решить эту проблему problem.Here мой код, что я сделал до сих пор

index.jsp:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org /TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>AJAX calls to Servlet using JQuery and JSON</title> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script> 
$(document).ready(function() { 
    $('#country').change(function(event) { 
    var $country=$("select#country").val(); 
     $.get('ActionServlet',{countryname:$country},function(responseJson) { 
      var $select = $('#states');       
      $select.find('option').remove(); 

      $.each(responseJson, function(index, name) {    
       $('<option>').val(index).text(name).appendTo($select);  
       }); 
     }); 
    }); 
});   
</script> 
</head> 
<body> 
<h1>AJAX calls to Servlet using JQuery and JSON</h1> 
Select Country: 
<select id="country"> 
<option selected="selected">Select Country</option> 
<option value="1">India</option> 
<option value="2">china</option> 
</select> 
<br/> 
<br/> 
Select State: 
<select id="states"> 
<option selected="selected">Select State</option> 
</select> 
</body> 
</html>

ActionServlet.java:

package ajaxdemo; 

import java.io.IOException; 
import java.sql.*; 
import java.util.*; 

import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 

import net.sf.json.JSONArray; 
import net.sf.json.JSONObject; 

import com.google.gson.Gson; 


public class ActionServlet extends HttpServlet { 
private static final long serialVersionUID = 1L; 


public ActionServlet() { 
    // TODO Auto-generated constructor stub 
} 


protected void doGet(HttpServletRequest request, 
    HttpServletResponse response) throws ServletException, IOException { 

    JSONArray cellarray = new JSONArray(); 
    JSONObject cellobj = null; //new JSONObject(); 
    JSONObject jo=new JSONObject(); 
    String country=request.getParameter("countryname"); 
    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); 
    } 



} 


protected void doPost(HttpServletRequest request, 
    HttpServletResponse response) throws ServletException, IOException { 
    // TODO Auto-generated method stub 

} 

}

Заранее благодарен

источник

2014-01-06 user2986084

почему обыкновение использовать $ select.html (response.html); , то убедитесь, что на вашей стороне сервера вы выберете опции выбора – talsibony

Не могли бы вы разместить полную структуру json, полученную с конца сервера – dreamweiver

, вы можете сделать console.log (responseJson), а затем проверить в своем браузере, как это выглядит, я что это должно быть что-то вроде этого {['id': '1'], ['name': 'somename']} – talsibony

Вы должны добавить тип 'json' в качестве последнего параметра функции $ .get(), также я думаю, что способ использования json неверен, будет проще, если вы предоставите серверный json-выход.

это будет работать, если это JSON:

/* 
    {"arrayName" : [{"id" : "1","name" : "Tamilnadu"}, {"id" : "2","name" : "Karnataka"}, {"id" : "3","name" : "Andaman and Nicobar"}]} 
*/ 


    $.get('ActionServlet',{countryname:$country},function(responseJson) { 
     var html; 
     var $select = $('#states'); 
     $.each(responseJson.arrayName, function(options) {    
     html += '<option name="'+options.id+'" >'+options.name+'</option>';  
     }); 
    $select.html(html); 
    },'json');

источник

2014-01-06 09:54:04 talsibony

привет талсибони, я получил нулевые значения во втором раскрывающемся списке, если я попробовал приведенный выше код – user2986084

Я изменил код, добавленный responseJson.arrayName, это должно работать сейчас – talsibony

@ user2986084 is он работает сейчас? – talsibony

занесение выпадающего списка на основе выбора предыдущего списка с помощью Ajax

ответ

Смежные вопросы