javascript - how to pass the multi-select values from JSP to controller without making use of any Model

Question

Could anyone please refer me any article which clearly explains how to pass the multi-select values from JSP to controller without making use of any Model.

My requirement : on a webpage there is just a multi-select List box and submit button. The multiselect list box contains the OrderId and CustomerCode separated by "|"

Example:

• Order1|Customer1
• Order2|Customer2
• Order3|Customer3
• Order4|Customer4
• Order5|Customer5

The user can select 1 or more and click on submit button. I need to query my order table and then generate a jasper report. So, my plan is to take the values from JSP into Controller (in form of List or OrderIds) Pass that to the Service and then create the JASPER using the corresponding jrxml.

It would be great to have some suggestion/advice from you on this.

标签： javascriptspringspring-mvcjspmulti-select

Answer 1

use the following technologies,

• java script - get the selected values from multi-select list box in the jsp
• ajax - pass the selected values to the controller from jsp

additionally use the spring framework for creating a java web application

multi-select list in the form.jsp

<select id='category' multiple='multiple'>
    <option value='Order1|Customer1'>Order1|Customer1</option>
    <option value='Order2|Customer2'>Order2|Customer2</option>
    <option value='Order3|Customer3'>Order3|Customer3</option>
    <option value='Order4|Customer4'>Order4|Customer4</option>
    <option value="Order5|Customer5">Order5|Customer5</option>
</select>

java script function for collect the selected multi values from jsp and pass it to the controller

function setData(){

    var selectedValues= [];
    $('#category:selected').each(function(i, selected) {
        selectedValues[i] = $(category).val();
    }); 

    $.ajax({
        type: 'POST',
        dataType: 'json',
        data {'selectedValues':selectedValues.toString()},
        url: '/Project_name/add'
    });
}

call the above js function from click event of the submit button

<button onclick="setData()">Submit</button>

above js function call the insertData() method in the controller (MyController) and pass the selected values to it

@Controller
public class MyController {

    @RequestMapping(value="/add", method=RequestMethod.POST)
    public void insertData(@RequestParam(value="selectedValues") ArrayList<String> selectedValues){
        //query order table and then generate a jasper report so on
    }

}