通過單擊列表元素將javascript對象添加到彈簧形式

我收到了從ajax調用創建的產品列表。此列表顯示產品的名稱和產品編號。現在，我想通過單擊產品列表中的列表元素將產品添加到表單中。通過單擊列表元素將javascript對象添加到彈簧形式

我正在使用spring mvc，因此表單使用了一個需要從窗體中填充數據的支持對象。我想添加的產品需要列入支持對象列表中。

在表格中我也想計算總價格。所以我需要比我在產品列表中獲得的更多信息。

我寧願不將它作爲json發佈到後端，而只是使用@ModelAttribute。

在列表中單擊時是否可以以某種方式將完整的對象（產品）賦予表單？

希望我已經解釋過自己，還有其他問題。

這裏是源代碼：

$(document).ready(function() { 
    $.getJSON('/oms/ajax/products', function(data) { 
     $.each(data, function(key, obj) { 
      $('#productList').append('<li onclick=\"addProduct(' + obj.productName + ')\">' + obj.productName + '</li>'); 
     }); 
    }); 
}); 

function addProduct(name) { 
    $('#orderItems').append('<li><input type=\"text\" name=\"order.lineItems[i]\" value=\"' + name + '\" /></li>'); 
} 

public class OrderDTO { 
    private List<OrderItemDTO> lineItems; 
    /** getters and setters **/ 
} 

public class OrderItemDTO { 

    private String productCode; 
    private String productName; 
    private String description; 
    private Float price; 
    private Integer quantity; 
    /** getters and setters **/ 
}

來源

2013-03-23 Michiel

問題是？ – 2013-03-23 22:40:31

什麼，你需要做的就是擺弄窗體的DOM，添加和刪除的項目作爲隱藏輸入字段。

Spring MVC通過子腳本處理項目的集合。這對List和Maps都適用。對於一個列表：

<form:form modelAttribute="myModel"> 
    <form:hidden path="myListItems[0].name" /> 
    <form:hidden path="myListItems[1].name" /> 

    <form:hidden path="myMapItems['key1'].name" /> 
    <form:hidden path="myMapItems['someOtherKey'].name" /> 
</form:form>

這顯示了將兩個項目添加到列表或兩個項目到地圖的正常方式。這使用Spring JSTL標籤來構建表單。但是，您將需要動態做到這一點，所以不是你會添加類似如下：

這是春天將如何產生上面的第二個列表項。使其工作的關鍵是獲取名稱屬性的權利。基本上，所有的Spring JSTL標籤都會生成某種形式的輸入。讓事情發揮作用的最佳方式是使用JSTL標籤查看它是如何實現的，然後簡單地複製產生的HTML標籤。

一旦您掌握瞭如何正確輸入輸入，現在只需寫一些JavaScript來動態地將正確的輸入添加到表單中即可。它看起來像你使用jQuery，所以你可以這樣做：

var myModel= $('#myModel); 
$("<input />",{ 
    type: 'hidden', 
    id: 'myListItems1.name', 
    name: 'myListItems[1].name', 
    value: 'someValue' 
}).appendTo(myModel);

這裏，#myModel是表單生成的ID。我們只是創建一個輸入元素，並將其附加到表單。夠簡單。

但是，以下是您遇到問題的位置。 Spring MVC使用簡單的setter來獲取/設置模型屬性中的值。這意味着您可以輕鬆地在List/Map中獲取和設置值，但這也意味着如果Model Attribute在Session中，Spring MVC不會刪除已存在的項目。我的意思是可以在下面的例子中解釋。

說你的用戶添加3項到他們的順序和預覽它。一旦它向您的控制器進行往返，您現在在Model Atttribute的集合中有3個項目（索引爲0,1和2的元素（如果其列表和您的數字是連續的）。現在讓我們說用戶決定他不想要項目2（索引1），並將其刪除。所以，你的JavaScript自然會從表單中刪除該項目。但是，當用戶提交時，即使表單不再包含索引1處的項目，它仍然位於模型屬性的集合中。這是因爲Spring MVC只會設置從表單提交中傳入的內容。它不記錄沒有設置的事物。

所以，你必須做的刪除是以某種方式跟蹤他們。有兩種方法可以實現這一點。首先是爲我的收藏中的對象添加刪除標誌。該標誌是一個簡單的布爾值，當它爲true時，控制器/服務層知道這個項目被刪除並且忽略它。在JavaScript中實現的方式是，在刪除項目時，只需替換/添加用於刪除標記的另一個隱藏輸入，並將其設置爲「true」。

第二種選擇是在移除時移動所有物品，使所有legitamate物品都是1-N。提交表單後，您將發送「有效」計數和模型屬性（作爲單獨的RequestParam或直接在模型屬性中的值）。控制器/服務層然後知道列表中應該有多少人，並且可以修剪不屬於他們的人。

我可以告訴你，無論你走哪條路，讓所有這些都能很好地工作是一個挑戰，你需要對Spring的工作方式有一個明確的理解。我會強烈建議寫一些簡單的測試應用程序，看看Spring產生了什麼（特別是在View中），並且試着讓它頭腦清醒。至於你如何實現所有這一切，這完全取決於你想如何編碼的東西。我傾向於嘗試限制視圖中保存的數據量，因此我的方法可能是僅發送訂單中的項目編號和數量列表。我認爲這對於訂購系統尤其重要，因爲人們可以操縱你的JavaScript，而一些惡毒的人最終會改變購物車中某件商品的價格，並最終導致你被剝離。不要相信瀏覽器發送的內容。

來源

2013-03-25 12:00:25 CodeChimp

非常感謝。我知道一半，但這篇文章讓我看到了完整的圖片。我使用jquery將產品添加到訂單中，只將產品ID和數量發送給控制器。 – Michiel 2013-03-28 11:45:44

通過單擊列表元素將javascript對象添加到彈簧形式

回答

相關問題