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

Question

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

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

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

Answer 1

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

1. If you want to do a synchronous form submit you'll need to attach onchange event to your first select element:

    <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 AJAX and 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.

Answer 2

1. Write a JavaScript function names callAJAX on the onchage event 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

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

Answer 3

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

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

Answer 4

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.

With jquery you can do it like this:

$.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:

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