2014-01-06 128 views
0

嗨根据以往的下拉列表中选择一个下拉列表,我有一个包含两个下拉列表形式的JSP页面,填充用ajax

  1. 第一个用于显示国名和
  2. 第二个显示相应国家下的国家。

我有一个Mysql数据库分别包含两个表的国家和州。

我想:

我需要填充从使用Ajax数据库,其中从数据库中的数据必须转换为JSON对象的第二下拉并给予响应为JSON object.Then填充第二个下拉的基于这个响应的Json对象。

ISSUE我面对:

我的问题是,当我选择在第一个下拉列表中的值的第二个下拉列表中填充的值“[对象的对象],[对象对象],[对象对象]'而不是显示相应的状态名称。

有人请帮我解决这个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 

} 

} 

在此先感谢

+0

为什么不会使用$ select.html(response.html); 然后确保在您的服务器端输出选择的选项 – talsibony

+0

您可以发布从服务器端收到的完整json结构 – dreamweiver

+0

您可以执行console.log(responseJson),然后在您的浏览器中查看它的外观如何相信它应该是这样的{['id':'1'],['name':'somename']} – talsibony

回答

2

您应该添加类型'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'); 
+0

hi talsibony,如果我尝试了上面的代码,我在第二个下拉列表中获得了空值 – user2986084

+0

我修改了代码,添加了responseJson.arrayName,现在该工作了 – talsibony

+0

@ user2986084它现在工作? – talsibony