javascript - 各行の入力を ajax で更新する

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

助けてください、ありがとう