使用 Jquery 和 Java 动态填充下拉框答案

【问题标题】：Dynamically populate a dropdown box with Jquery and Java使用 Jquery 和 Java 动态填充下拉框
【发布时间】：2018-06-03 14:11:04
【问题描述】：

请多多包涵，因为我是 jQuery 和 JEE 的新手，而且不是程序员 :-) 我遵循了许多关于如何动态填充下拉框的教程；但是我无法让它工作。

我想选择一个州并根据该选择填充区域下拉列表（每个州都由区域组成）。

我的问题是调用 java 和返回值。

到目前为止，我已经（从许多教程中总结出来）以下内容：

HTML

<div class="row">
            <div class="col-md-6">
                <div class="form-select-group">
                    <label for="selectState">Select State:</label>
                    <select class="form-control" id="selectState">
                        <option value="" disabled selected>Select your State</option>
                        <option>ACT</option>
                        <option>NSW</option>
                        <option>NT</option>
                        <option>QLD</option>
                        <option>SA</option>
                        <option>TAS</option>
                        <option>VIC</option>
                        <option>WA</option>
                    </select>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-select-group">
                    <label for="selectRegion">Select Region:</label>
                    <select class="form-control" id="selectRegion">
                        <option>Please select your State first</option>
                    </select>
                </div>
            </div>
        </div>

jQUERY

$(document).ready(function(){
$('#selectState').on('change', function() {
    //do something here
    //alert($("#accountName").val());

    $.ajax({
        type: "POST",
        url: "RegionView",
        cache: false,
        data: $(selectState).serialize(),
        success: function(data){
            $('#ajaxGetUserServletResponse').text(data);                
        }
    }).done(function(response) {
        // Clear options
        $("#selectRegion").find("option").remove();
        // Loop through JSON response
        $.each(response, function (index, value) {
            $('#selectRegion').append($('<option>', { value: value.name }, '</option>'));
        })
    });
});
});

JAVA

package client;

import java.io.IOException;

/**
* The purpose of this View is to return a list of Regions associated with a selected State.
*/

import java.util.List;

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

import server.MySQLConnection;


@WebServlet("/RegionView")
public class RegionView extends HttpServlet {

private static final long serialVersionUID = 1L;

@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    String state = request.getParameter("selectState"); // From bootstrap

    response.getWriter().write("Here " + state);

    MySQLConnection.getConnection();

    List<String> listRegions = MySQLConnection.listGroupRegions(state);

    if (listRegions == null || listRegions.isEmpty()) {
        response.getWriter().write("Please select a State");
    }else{
        response.getWriter().write("State found");
        request.setAttribute("selectRegion", listRegions);
    }
}
}

【问题讨论】：

您在 ajax 请求的成功回调中获取的数据是什么？
"success: function(data){ $('#ajaxGetUserServletResponse').text(data); }" 提供 - “这里发现了新南威尔士州”。 "}).done(function(response) { $('#ajaxGetUserServletResponse').text(response); $("#selectRegion").find("option").remove(); $.each(response, function (index, value) { $('#selectRegion').append($('')); })" 不显示任何内容。应该我正在使用除“$('#ajaxGetUserServletResponse').text(response);”之外的其他东西来显示响应？我尝试了“console.log(response);”，但日志文件中没有任何内容。
您混淆了两种约定。如果您在 ajax 请求中使用成功回调，则不需要将 then 函数链接到 promise。否则使用 then 函数并删除成功回调。一种或另一种方式，您将在响应中获取数据，您应该使用这些数据来追加内部元素。
谢谢戈什。不幸的是，我不明白你刚刚写了什么。你能给我一些代码吗？
嗨 Sandip，我确定这是否是您的意思；但是我尝试了这个，它没有工作：“成功：函数（数据）{$（'#ajaxGetUserServletResponse'）.text（data）; $（“#selectRegion”）.find（“option”）.remove（）; $.each(response, function (index, value) { $('#selectRegion').append($('')); }) }"

标签： java jquery html

【解决方案1】：

这段代码回答了我的问题，因为它允许我使用 Jquery 和 Java 动态填充下拉框：

Java：

@WebServlet("/RegionView")
public class RegionView extends HttpServlet {

private static final long serialVersionUID = 1L;

@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String state = request.getParameter("selectState"); // From bootstrap

MySQLConnection.getConnection();

List<String> listRegions = MySQLConnection.listGroupRegions(state);

if (listRegions == null || listRegions.isEmpty()) {
    response.getWriter().write("Please select a State");
}else{          
    String json = new Gson().toJson(listRegions);
    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(json);
}
}
}

JSON：

$(document).ready(function(){
$('#selectState').on('change', function() {
//do something here
//alert($("#accountName").val());

$.ajax({
    type: "POST",
    url: "RegionView",
    cache: false,
    data: $(selectState).serialize(),
    success: function(data){
        $('#ajaxGetUserServletResponse').text(data);

    }
}).done(function(responseJson) {
    dataType: "json",
    // Clear options
    $("#selectRegion").find("option").remove();
    // Loop through JSON response
    $.each(responseJson, function(key, value) {
        $('<option>').val(key).text(value).appendTo($("#selectRegion"));
    });
});
});
});

【讨论】：