使用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代碼 - 注意：我削減了部分的readabi lity所以語法可能不完美

$('#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與同name.but使用多個ID與值相同name.so只有第一個標識號的這 -

ID = $（ 「＃ID」）ATTR（ 「值」）。

您可以通過限定當前部分來解決您的問題，並從當前參考中選取值。

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