当前位置 : 主页 > 编程语言 > java >

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

来源:互联网 收集:自由互联 发布时间:2021-06-25
我有一个JSP,其中有一个包含实体类名称的选择列表.当我选择实体类型时,我需要使用所选实体类型的字段名称填充另一个选择列表.为此,我在onchange事件上调用了一个JavaScript函数. 在Ja
我有一个JSP,其中有一个包含实体类名称的选择列表.当我选择实体类型时,我需要使用所选实体类型的字段名称填充另一个选择列表.为此,我在onchange事件上调用了一个JavaScript函数.

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

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

我将描述两种方法:使用/不使用AJAX.

>如果要进行同步表单提交,则需要将onchange事件附加到第一个选择元素:

<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));
    });
});

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

网友评论