Question

我有一个表格，显示我的案例中的'目击'列表，每个特定列都可以更新，因为值显示在字段中等等。每个单独的行上都有一个更新按钮，我想在此处单击我已经完成了对特定行的更新。这是我的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"; 
}

请帮忙，谢谢

Answer 1

问题在于序列化数据。您在button元素而不是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); 
        } 
    });
});

使用ajax更新每行中的输入

1 个答案: