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

Calling a backend Java method from JavaScript/jQuery in JSP

提问by Trisha

I have a JSP in which there is a selectlist containing entity kind names. When I select an entity kind I need to populate another selectlist with the field names of the selected entity kind. For that I call a JavaScript function on the onchangeevent.

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

In the JavaScript method I need to call a method in the backend that returns an arraylistthat contains the field names of the selected entity kind.

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

How do I call the method with and without Ajax? Also how do I populate the second select list dynamically with the arrayList?

我如何在使用和不使用 Ajax 的情况下调用该方法？另外，如何使用arrayList?动态填充第二个选择列表？

采纳答案by skuntsel

I'll describe two ways to go: with/without AJAX.

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

1. If you want to do a synchronous form submityou'll need to attach onchangeevent to your first selectelement:

   <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>
   

   When done this way, the form will be submitted and first select option will be available as request.getParameter("select-one"), based on which you'll provide data for second dropdown population, typically forwarding to a JSP.

2. If you want to retrieve a list via AJAXand repopulate another dropdown, you can send an AJAX request and handle returned data in a callback function:

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

   When done this way, the second dropdown will be repopulated without page refresh.

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

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

回答by Drogba

You want to load your list dynamically from backend. You must communicate with your server either:

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

• with a page load (form submit)
• or without a page load(ajax).

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

If AJAXis not your requirement, I suggest you do it by form submit(with page load) first because it's simple and easier for beginner.

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

回答by Hussain Akhtar Wahid 'Ghouri'

1. Write a JavaScript function names callAJAX on the onchageevent of your select drop down

2. In your callAJAX function , make an ajax call to the back end, get the response from the server, and populate the new drop down with the response coming in your ajax call

1. onchage在选择下拉列表的事件上编写一个 JavaScript 函数名称 callAJAX

2. 在您的 callAJAX 函数中，对后端进行 ajax 调用，从服务器获取响应，并使用 ajax 调用中的响应填充新的下拉列表

I hope you can make ajax calls , if not let me know.

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

回答by KSS

Agree with Jai. You will have to submit that form to the java method, then your java method will return the arrayList. Of course if you form submit, your page will be refreshed and I'm not sure if your previously selected values will still be selected on the form. I'm not too clued up with this method of doing it. I prefer to use jquery.

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

With jquery you can do it like this:

使用 jquery，您可以这样做：

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

Put this in a function. Pass your selected entity as a parameter and handle the response in the success part. Of course your java method should map 'selectedEntity' to a parameter in the method header. In Spring it's done like this:

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

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