通过单击列表元素将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对象添加到弹簧形式

回答

相关问题