Как отправить данные таблицы из формы HTML, отправив через ajax вызов контроллеру Spring MVC - PullRequest
Новая
       18

Как отправить данные таблицы из формы HTML, отправив через ajax вызов контроллеру Spring MVC

0 голосов
/ 13 октября 2018

Скажем, у меня есть HTML-таблица в формате, подобном этому 

<form> <table id="a">
    <thead>
    <th>Name</th>
    <th>Series</th>
    <th>Value</th>
    </thead>
    <tbody id="b">
    <tr><td>Enhancer</td><td>Enhancement</td><td>50</td></tr>
    <tr><td>Plans</td><td>Plan</td><td>50</td></tr>
    </tbody>
    </table>
    <input type="submit" value="Send" action="SomeControllerAction" /></form>

, в котором есть две строки под заголовками «Имя», «Серия» и «Значение».

Iнеобходимо отправить эти данные через форму , отправив Spring Controller с Ajax , где я могу итерационно получать или устанавливать значения для каждой строки в модели.Я не уверен, как этого добиться.Вот как отправить данные из таблицы в метод контроллера пружины и получить значения.

Помогите с сегментами кода!Спасибо

Ответы [ 2 ]

0 голосов
/ 14 октября 2018

Хотя предыдущий ответ правильный, я бы предложил ввести класс, содержащий три поля: name, series и value.Этот класс должен иметь осмысленное имя.Здесь я назвал его MyObject, потому что я не знаю, о чем ваше приложение.

MyObject : 

public class MyObject {

    private String name, series;
    private Integer value;

    // Getters and setters
}

Контроллер (тип возврата может быть другим) 

@PostMapping("/series")
@ResponseBody
public List<MyObject> postSeries(@RequestBody List<MyObject> myObjects) {
    myObjects.forEach(System.out::println);
    // Handle myObjects
    return myObjects;
}

JSP 

<table id="tableMyObjects">
    <thead id="a">
    <tr>
        <th>Name</th>
        <th>Series</th>
        <th>Value</th>
    </tr>
    </thead>
    <tbody id="b">
    <tr>
        <td><input type="text" name="name"  /></td>
        <td><input type="text" name="series" /></td>
        <td><input type="text" name="value" /></td>
    </tr>
    <tr>
        <td><input type="text" name="name" /></td>
        <td><input type="text" name="series" /></td>
        <td><input type="text" name="value" /></td>
    </tr>
    </tbody>
</table>
<button id="postButton">Post myObjects</button>

jQuery 

$('#postButton').click(function() {
    var myObjects = [];
    $('#b tr').each(function(index, item) {
        var $item = $(item);
        myObjects.push({
            name: $item.find("td input[name='name']").val(),
            series: $item.find("td input[name='series']").val(),
            value: $item.find("td input[name='value']").val(),
        });
    });
    $.ajax({
        url: '/series',
        method: 'POST',
        contentType : 'application/json; charset=utf-8',
        data: JSON.stringify(myObjects)
    })
    .done(function(myObjects) {
        // handle success
    })
    .fail(function() {
        // handle fail
    });
});
0 голосов
/ 13 октября 2018

Используя javascript / jquery, вы можете сделать это легко.

Создайте скрытое текстовое поле типа ввода, повторяя содержимое таблицы, как показано ниже, с тем же именем. 

<tbody id="b">
    <tr>
      <td>
       <input type="hidden" name="Name" value="Enhancer" />
       Enhancer
      </td>
      <td>
       <input type="hidden" name="Series" value="Enhancement" />
       Enhancement
      </td>
      <td>
       <input type="hidden" name="Value" value="50" />
       50
     </td>
   </tr>
</tbody>

и затем получитевсе значения скрытых полей по имени, как показано ниже. 

$("[name='Name']").val();
$("[name='Series']").val();
$("[name='Value']").val();

и затем в контроллере принимают эти параметры в виде массива, как показано ниже. 

@RequestMapping(method = RequestMethod.POST, produces = "text/html")
       public String create(@RequestParam(value = "Name") String[] Name,
               @RequestParam(value = "Series") String[] Series,
               @RequestParam(value = "Value") String[] Value,
               BindingResult bindingResult, Model uiModel, HttpServletRequest httpServletRequest){
             //code goes here
}

ПРИМЕЧАНИЕ. Необходимо написатьjavascript код для установки значений скрытых полей для нескольких строк примерно так: вызов функции javascript с помощью if JSTL

...