Question

我有一个JSP，其中有一个包含实体类名称的select列表。当我选择实体类型时，我需要使用所选实体类型的字段名称填充另一个select列表。为此，我在onchange事件上调用了一个JavaScript函数。

在JavaScript方法中，我需要在后端调用一个方法，该方法返回一个arraylist，其中包含所选实体类型的字段名称。

如何使用和不使用Ajax调用方法？另外，如何使用arrayList动态填充第二个选择列表？

Answer 1

我将描述两种方法：使用/不使用AJAX。

如果您要执行同步表单提交，则需要将onchange事件附加到您的第一个select元素：
```
<select name="select-one" id="select-one" onchange="this.form.submit()">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
```
以这种方式完成后，表单将被提交，第一个选择选项将作为request.getParameter("select-one")提供，您将根据该选项提供第二个下拉填充数据，通常转发到JSP。

如果您想通过AJAX 检索列表并重新填充另一个下拉列表，您可以发送AJAX请求并在回调函数中处理返回的数据：

var val = $('#select-one option:selected').val(); $.ajax({ url: "servletURL",//servlet URL that gets first option as parameter and returns JSON of to-be-populated options type: "POST",//request type, can be GET cache: false,//do not cache returned data data: {one : val},//data to be sent to the server dataType: "json"//type of data returned }).done(function(data) { var second = $("#select-two"); $.each(data, function() { options.append($("<option />").val(this.value).text(this.label)); }); });

以这种方式完成后，第二个下拉列表将重新填充而不刷新页面。

Answer 2

在选择下拉列表的onchage事件上编写JavaScript函数名称callAJAX
在你的callAJAX函数中，对后端进行ajax调用，从服务器获取响应，并使用ajax调用中的响应填充新的下拉列表

如果不让我知道，我希望你可以拨打ajax电话。

Answer 3

您想要从后端动态加载列表。您必须与服务器通信：

页面加载（表单提交）
或没有页面加载（ajax）。

如果AJAX不是您的要求，我建议您首先通过表单提交（带页面加载）来实现，因为它对于初学者来说简单易用。

Answer 4

同意Jai。您必须将该表单提交给java方法，然后您的java方法将返回arrayList。当然，如果您进行提交，您的页面将会刷新，我不确定您之前选择的值是否仍会在表单上选中。我不太习惯这种做法。我更喜欢使用jquery。

使用jquery，你可以这样做：

$.ajax({
    url: "/MyApp/MyClass/getArrayList",
    type: "GET",
    data: "selectedEntity=" + s_entity,
    success: function(response){ 
        //handle returned arrayList
    },
    error: function(e){  
        //handle error
    } 
});

把它放在一个函数中。将您选择的实体作为参数传递，并在成功部分中处理响应。当然，您的java方法应该将'selectedEntity'映射到方法头中的参数。在Spring，它是这样完成的：

private @ResponseBody ArrayList getArrayList(@RequestParam("selectedEntity") String entity)

在JSP中从JavaScript / jQuery调用后端Java方法

4 个答案: