在JSP中從JavaScript / jQuery調用后端Java方法

Question

我有一個JSP，其中有一個包含實體類名稱的select列表。 當我選擇實體類型時，我需要使用所選實體類型的字段名稱填充另一個select列表。 為此，我在onchange事件上調用了一個JavaScript函數。

在JavaScript方法中，我需要在后端調用一個方法，該方法返回一個包含所選實體類型的字段名稱的arraylist 。

如何使用和不使用Ajax調用該方法？ 另外如何使用arrayList動態填充第二個選擇列表？

Answer 1

我將描述兩種方法：使用/不使用AJAX。

1. 如果要進行同步表單提交 ，則需要將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。

2. 如果要通過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

1. 在選擇下拉列表的onchage事件上編寫一個JavaScript函數名稱callAJAX

2. 在你的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)