使用 Ajax 处理表单列表

Question

我正在开发一个 Spring MVC 应用程序，用户可以在其中创建和更新任务。目前，当页面加载时，jdbc 调用发生在服务器端，任务列表被放入模型中并显示在客户端。我正在使用 AJAX 来允许用户更新任务，但它似乎只适用于列表中的第一个任务，我假设是因为列表中的每个表单都具有相同的 ID。我是 AJAX 的新手，而不是世界上最伟大的客户端开发人员，所以我不确定这是否是一个好的开始方法。有什么好方法可以让 Ajax “识别”每个表单的帖子？我的代码在下面，请注意它主要是为了传达我正在使用的方法，因此请忽略任何拼写错误，假设 ajax 调用适用于列表中的第一个表单...

HTML + Thymeleaf 代码

<li th:each="task:${tasks}">
    <div th:text="${task.name}"></div>
    <div class="row">
        <form id="updateTask" th:action="@{/updateTask}" th:object="${Task}" method="post">
            <input id="id" th:value="${task.id}"/>
            <input id="name" th:value="${task.name}"/>
            <input id="description" th:value="${task.description}"/>
            <button class="btn waves-effect waves-light green" type="submit" name="saveTask" value="saveTask">
                Save <i class="mdi-content-send right"></i>
            </button>
        </form>
    </div>
</li>

从服务器生成的 HTML - 为便于阅读而截断

<li>
    <form id="updateTask" method="post" action="/updateTask">
        <input id="id" value="37" />
        <input id="name" value="Scrub the floors" />
        <input id="description" value="Make the floors shiny!" />
        ...
    </form>
</li>
<li>
    <form id="updateTask" method="post" action="/updateTask">
        <input id="id" value="38" />
        <input id="name" value="Walk the Dog" />
        <input id="description" value="Make sure he poops" />
        ...
    </form>
</li>

AJAX 代码 - 请注意，为了便于阅读，我修剪了一些代码，因此语法可能并不完美

$('#updateTask').submit(function(event) {

event.preventDefault();

var id = $("#id").attr("value");
var name = $("#name").prop("value");
var description = $("#description").prop("value");

//Make the ajax call
$.ajax({
    url : requestMapping,
    type : "POST",
    data : {
        "id" : id,
        "name" : newName,
        "description" : newDescription
    },

    //handle success
    success : function(response) {
        alert("Task " + id + " has been updated!");
    },

    //handle errors
    error : function(xhr, status, error) {
        alert(xhr.responseText);
    }});
    return false;
});

Answer 1

Html 页面应该包含一个同名的 id。但是您正在使用多个同名的 id。所以只有第一个 id 的值 -

id = $("#id").attr("value");

您可以通过限定当前部分来解决您的问题，并从当前参考中选择值。

id = $(this).find("#id").attr("value");

你的代码

$('#updateTask').submit(function(event) {

event.preventDefault();
// this is the current reference of form on which you are performing action.
var id = $(this).find("#id").attr("value");
var name = $(this).find("#name").prop("value");
var description = $(this).find("#description").prop("value");

//Make the ajax call
$.ajax({
    url : requestMapping,
    type : "POST",
    data : {
        "id" : id,
        "name" : newName,
        "description" : newDescription
    },

    //handle success
    success : function(response) {
        alert("Task " + id + " has been updated!");
    },

    //handle errors
    error : function(xhr, status, error) {
        alert(xhr.responseText);
    }});
    return false;
});