Заполните раскрывающийся список на основе ввода другого в одной форме без отправки формы (Spring MVC + jsp)

Question

У меня есть два раскрывающихся меню (форма: выберите) в одной форме в файле .jsp, и я хотел заполнить второе раскрывающееся меню на основе выбора первого, однако проблема в том, что я не могу отправить форму, поскольку У меня уже есть сопоставление контроллера, которое сохраняет значения формы в БД. Я знаю, что это можно сделать с помощью AJAX (хотя я не настолько знаком с AJAX, я больше увлечен серверной разработкой). Поэтому я бы хотел найти решение без использования AJAX. Любые указатели на то, с чего начать, очень ценятся, хотя это может звучать глупо.

Обновление, соответствующее ответу, который я получил от Дэнни,

Думаю, у меня проблема с предложенным подходом,

"На стороне клиента используйте JQuery, который запрашивает данные у вашего контроллера Spring MVC с помощью POST:"

Проблема в том, что у меня уже есть сопоставление контроллера отправки формы (POST), позволяющее сказать что-то вроде /saveUser.htm)

Я объясню мою проблему на примере, возможно.

здесь у меня есть две выпадающие страны и провинции,

<form:select path="country" cssClass="dropdown" >

<form:select path="province" cssClass="dropdown" >

Если пользователь выбирает конкретную страну, то в провинциях этой страны должно быть загружено второе раскрывающееся меню.

Таким образом, если я изменю первый раскрывающийся список (страну), чтобы отправить форму на изменение,

<form:select path="country" cssClass="dropdown" onchange="document.forms['userForm'].submit();">

будет вызвано отображение контроллера

@RequestMapping(value = "/saveUser.htm" method=RequestMethod.POST)
public void saveUser(....)

не

@RequestMapping(value = "/getOptions" method=RequestMethod.POST)
@ResponseBody
public String getOptionds(HttpServletResponse response) 

хотя.

С уважением, Карл

Answer 1

На стороне клиента используйте JQuery, который запрашивает данные у вашего контроллера Spring MVC, используя POST:

 $.post("/getOptions", function(options) {
     .each(options, function(val, text) {
            $('#mySelect').append(
                $('<option></option>').val(val).html(text)
            );
        });
 });

на стороне сервера:

@RequestMapping(value = "/getOptions" method=RequestMethod.POST)
@ResponseBody
public String getOptionds(HttpServletResponse response) {
String response = "{val1 : 'option1', val2 : 'option2'}"; 
return response;
}

Я могу пропустить некоторые детали, но это концепция. Надеюсь, это поможет.

Answer 2

Попробуйте что-то вроде этого:

$.ajax({
    type: "POST",
    url: "someUrl",
    dataType: "json",
    data: {
        varname1 : "varvalue1",
        varname2 : "varvalue2"
    },
    success: function (data) {
        $('#selectName').empty(); // empty existing list
        $('#selectName').append('<option value="">Some Label</option>');
        $.each(data, function (varvalue, vartext){
            $('#selectName').append($('<option></option>').val(varvalue).html(vartext));
        });  
    }
});

Это вызовет метод POST для someUrl с этими (ноль или более / необязательные) параметрами данных и, когда контроллер вернется успешно, выполнит функцию успеха.

Затем в вашем контроллере сделайте что-то вроде этого (примечание: используйте двойные кавычки вокруг любых строк для допустимого JSON - они должны быть экранированы в java):

@RequestMapping(value = "/someUrl", method=RequestMethod.POST)
@ResponseBody
public String getJsonData(@RequestBody String parameters) {
    String exampleData = "{\"somename1\":\"somevalue1\",\"somename2\":\"somevalue2\"}";
    return exampleData;
}

@ RequestMapping установлен вметод POST для / someUrl

@ ResponseBody означает, что возвращаемая строка должна использоваться в качестве данных

@ RequestBody содержит (необязательные) параметры URL / данных, например: «varname1 = varvalue1 & varname2 = varvalue2»

Вы должны будете добавить некоторую логику, чтобы создать строку JSON, содержащую содержимое этого второго списка, примерно так?

{"selectId1":"selectValue1","selectId2":"selectValue2",..."selectId9":"selectValue9"}

Тогда выбор будет заполнен такими параметрами:

<option value="">Some Label</option>
<option value="selectId1">"selectValue1"</option>
<option value="selectId2">"selectValue2"</option>
...
<option value="selectId9">"selectValue9"</option>