JQuery + Ajax: отправить одно текстовое поле для контроллера

Question

Я работаю над приложением расписания.Я хотел бы добавить функцию автосохранения.Допустим, у меня есть такая форма:

<form id="timesheet" action="save_timesheet.html" method="POST">
<input type="text" id="day1taskid2" />
<input type="text" id="day2taskid2" />
<input type="text" id="day3taskid2" />
<input type="text" id="day41taskid2" />
...
</form>

Если пользователь вставляет новое значение (= onChange), я бы хотел получить это конкретное значение и отправить его на мой контроллер (используя JSON /Ajax).Например: я добавляю 2 часа к определенному текстовому полю, и jQuery ajax должен выполнить обновление onChange.Трудно найти работающий пример.Я видел много примеров использования формы, но я не отправляю всю форму, только одно маленькое текстовое поле.На одном экране может быть более 70 текстовых полей в зависимости от количества отображаемых задач.

Что мне нужно?Не могли бы вы привести простой для понимания пример для этого случая?Я использую Spring 2.x.

Добавлено решение; -)

Answer 1

Вы можете сделать ручную запись ajax с содержимым из текстового поля, в котором вы сейчас находитесь. Затем в дескрипторе кода вашего сервера, что когда-либо появится:

$("[input='text']").change(function() { 
    var $this = $(this);
    $.ajax({
        url: "url/to/your/server",
        data: { name: $this.attr("id"), value: $this.val() },
        success: function(data) {
            console.log(data);
        }
    });
});

Это отправит пару ключ-значение на ваш сервер, где ключ будет идентификатором текстового поля, а значение будет фактическим значением.

Таким образом, в коде вашего сервера вы можете просто проверить ключ и соответственно обработать значение.

Answer 2

Я использую jQuery AJAX для вызова на мой контроллер.

Мой взгляд:

function doUpdate(id, taskid){
        var x = id.value;
        var firstday = document.getElementById('firstweek').value;
        var pid = document.getElementById('projectid').value;

        if (x >=0 && x <= 24 && x != ""){
            $.post("savets.html", { hours: x, id: id.id, taskid: taskid, firstday: firstday, pid: pid }, function(data) {
                alert("callback");  
            });  
        } else {
            alert("Please enter a valid number: 0 - 24");
        }

Мой контроллер:

@RequestMapping(value = { "/savets.html" }, method = RequestMethod.POST)
public String addTimeRecord(ModelMap model, HttpServletRequest request,
        ) {
    System.out.println("Doing the insert onUpdate with value = "
            + request.getParameter("hours") + " for ID "
            + request.getParameter("id") + " " 
            + request.getParameter("firstday")  + " " 
            + request.getParameter("taskid"));

Форма:

<input type="text" onChange=doUpdate(id of my record, the taskid) />

Остальное самоочевидно.У меня есть скрытые значения в моей форме, я получаю их с помощью Javascript.После этого я вызываю контроллер, который будет выполнять обновление (я не добавил этот код, так как это простая проверка + вставка)