Question

嗨，我有一个JSP页面，其中包含一个包含两个下拉列表的表单，

第一个显示国家/地区名称和
第二个用于显示相应国家/地区的州。

我有一个Mysql数据库，分别包含两个表country和state。

我想要什么：

我需要使用Ajax填充数据库中的第二个下拉列表，其中必须将数据库中的数据转换为Json对象并将响应作为Json对象。然后根据此响应Json对象填充第二个下拉列表。

问题我在面对：

我的问题是，当我在第一个下拉列表中选择一个值时，第二个下拉列表会填充值'[object Object]，[object Object]，[object Object]'而不是显示相应的州名。

有人请帮我解决这个问题。这是我迄今为止所做的代码

的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

}

 }

提前致谢

Answer 1

你应该添加类型＆＃39; json＆＃39;作为$ .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');

Answer 2

第一点： 如果警报框显示[对象对象]。这仅是正确的。因为警告框既不能显示字符串，也不能显示此属性。而不是使用警报框，只需尝试console.log（data）; 您可以看到您的数据正确存在。因此，这不是您的警报框的问题。

第二点 可能是[不确定] 您的数据采用以下格式：- [ { “地图”： { “ TARGET_ID”：“ 2020-000001”，“ STATUS”：“ OPEN”，“ FREQ_ID”：“ f001”，“ END_DATE”：“ 2020-05-30 00：00：00.0”，“ START_DATE”：“ 2020- 05-15 00：00：00.0“ } } ， { “地图”： { “ TARGET_ID”：“ 2020-000001”，“ STATUS”：“ OPEN”，“ FREQ_ID”：“ f002”，“ END_DATE”：“ 2020-06-14 00：00：00.0”，“ START_DATE”：“ 2020- 05-31 00：00：00.0“ } } ， { “地图”： { “ TARGET_ID”：“ 2020-000001”，“ STATUS”：“ OPEN”，“ FREQ_ID”：“ f003”，“ END_DATE”：“ 2020-06-30 00：00：00.0”，“ START_DATE”：“ 2020- 06-15 00：00：00.0“ } } ]

要解决此问题，请使用我给定的解决方案。会起作用

<script>
function callFunction() {
            $.ajax({
                type: 'POST',
                headers: {
                    Accept: "application/json; charset=utf-8",
                    "Content-Type": "application/json; charset=utf-8"
                },
                url: '/Tutorial/abc',
                cache: false,
                dataType: "json",
                success: function (data) {
                    array_data = [];
                    target_id = [];
                    var s = '';

                    $.each(data, function (index, value) {
                        array_data.push(value['map']);
                    });

                    s += "<select name='user_id' onchange='onsubmitUser();' >";
                    s += "<option value='' disabled selected>Select your User id</option>";

                    $.each(array_data, function (index, value) {


                        s += '<option value="' + value['USER_ID'] + '">' + value['USER_ID'] + '</option>';

                    });
                    s += '</select>';
                    $('#result').html(s);
                },
                error: function () {
                    alert('error');
                }
            });
        }
    </script>

根据使用ajax选择上一个下拉列表填充下拉列表

2 个答案: