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);
        }
    });
});

这将向您的服务器发送一个键值对，其中键是文本框的 id ，该值将是实际值。

因此，在您的服务器代码中，您只需检查密钥，并相应地处理该值。

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 获取它们。之后，我调用将执行更新的控制器（我没有添加此代码，因为它是一个简单的检查+插入）