Question

我正在使用Spring MVC。我有一个视图，根据从控制器调用的查询动态填充2个下拉列表。我想基于第一个下拉选项动态运行查询以更改第二个下拉列表，这意味着再次访问控制器（我认为）。我是否可以在不更改视图的情况下从同一视图多次访问控制器？例如，假设开始第一个下拉列表是美国各州的列表，第二个下拉列表是所有美国城市的列表，如果我从第一个列表中选择NC，我想要更改第二个列表仅包括NC城市

以下是第一个下拉列表的示例：

<select name = "states" onChange = "populateCityList(this.options[this.selectedIndex].value)">
            <option value ="*">All States</option>
            <c:forEach items="${states}" var ="state">
                <option value ="${state}">${state}</option>

非常简单，但我真的不知道从那里去哪里。我现在在当前视图中调用Javascript函数，但我不知道这是否正确或者在该函数中甚至做了什么。

Answer 1

神奇的词是AJAX。

您的JavaScript函数需要向您的控制器发出AJAX请求，理想情况下，该请求将返回包含第二个下拉列表值的JSON数据结构。然后，您的JS函数应该具有一个回调函数，该回调函数从您的控制器捕获JSON，并通过操作DOM来填充下拉HTML。 JQuery是要走的路。网上有很多例子，只是搜索它。

Answer 2

您好@ user2033734您可以这样做：

JQuery代码

$(document).ready(function() {
 $("#id1").change(function () {
    position = $(this).attr("name");
    val = $(this).val()
    if((position == 'id1') && (val == 0)) {
        $("#id2").html('<option value="0" selected="selected">Select...</option>')
    } else {
        $("#id2").html('<option selected="selected" value="0">Loading...</option>')
        var id = $("#id1").find(':selected').val()
        $("#id2").load('controllerMethod?yourVariable=' + id, function(response, status, xhr) {
            if(status == "error") {
                alert("No can getting Data. \nPlease, Try to late");
            }
        })
    }
 })
})

和

中的JSP

<table style="width: 100%;">
<tr>    
    <td width="40%"><form:label path="">Data 1: </form:label></td>
    <td width="60%">
        <form:select path="" cssClass="" id="id1">
            <form:option value="" label="Select..." />
            <form:options items="${yourList1FromController}" itemValue="id1" itemLabel="nameLabel1" />
        </form:select>
    </td>
</tr>
<tr>
    <td width="40%"><form:label path="">Data 2: </form:label></td>
    <td width="60%">
        <form:select path="" cssClass="" id="id2">
            <form:option value="" label="Select..." />
            <form:options items="${yourList2FromController}" itemValue="id2" itemLabel="nameLabel2" />
        </form:select>
    </td>
</tr>
</table>

我希望能帮到你:)

Answer 3

一种解决方案是将一些数据收集到一个服务中，这样您的主控制器就可以在发送到视图之前使用该服务来收集数据。

我可以在一个视图中多次访问同一个控制器而无需更改视图吗？

3 个答案: