1

在我的情况下，我有一个显示“目击”列表的表格，并且每个特定列都可以随着字段中显示的值等进行更新。每一行都有一个更新按钮，我想在完成后单击该按钮更新该特定行。这是我的 forEach 循环显示所有条目：

<c:forEach var="mySightings" items="${mySightings}">    
            <tr>
                <td><input name="id" class="data sighting_id" disabled value="${mySightings.id}"/></td>
                <td><input name="total_pests" type="number" value="${mySightings.total_pests}"/></td>
                <td><input name="date" type="date" value="${mySightings.date}"/></td>
                <td><input name="username" disabled value="${mySightings.username}"/></td>
                <td><textarea name="information">${mySightings.information}</textarea></td>
                <td>
                    <button class="update_sighting btn btn-success">Update</button>
                </td>
                <td>
                    <button class="delete_sighting btn btn-danger" value="${mySightings.id}">Delete</button>
                </td>
            </tr>       
</c:forEach>

这是我的 Ajax 函数，我认为这绝对是错误的：

$(".update_sighting").click(function(){
    $.ajax({
        type: "POST",
        url: "${pageContext.request.contextPath}/updateSighting",
        data: $(this).serialize(),
        success: function(response) {
            $("#alert").show();
            alert("Submitted");
            $(".errormsg").hide();
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) { 
            alert("Status: " + textStatus); alert("Error: " + errorThrown); 
        } 
    });
});

我需要对我的 ajax 代码进行一些更改吗？我不知道我接下来应该做什么？还有我处理请求的控制器：

@RequestMapping(value = "/updateSighting", method = RequestMethod.POST)
public @ResponseBody String updateUser(Sighting sighting, Model model) {
    sightingsService.updateSighting(sighting);
    List<Sighting> sightings =  sightingsService.getAllSightings();
    model.addAttribute("sightings", sightings);
    return "allSightings"; 
}

请帮忙，谢谢

4

1 回答 1

1

问题在于序列化数据。您在button元素而不是 a上调​​用它form，但即便如此，这也会序列化整个表单，而不仅仅是单击的行。因此，您需要构建对象以手动序列化：

$(".update_sighting").click(function(){
    var $row = $(this).closest('tr');
    $.ajax({
        type: "POST",
        url: "${pageContext.request.contextPath}/updateSighting",
        data: {
            id: $('input[name="id"]', $row).val(),
            total_pests: $('input[name="total_pests"]', $row).val(),
            date: $('input[name="date"]', $row).val(),
            username: $('input[name="username"]', $row).val(),
            information: $('input[name="information"]', $row).val()
        },
        success: function(response) {
            $("#alert").show();
            alert("Submitted");
            $(".errormsg").hide();
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) { 
            alert("Status: " + textStatus); alert("Error: " + errorThrown); 
        } 
    });
});
于 2013-10-17T12:26:25.173 回答