使用javascript中的索引获取spring模型属性列表元素

很抱歉，如果有人在其他地方问过这个问题，但我已经环顾了四周，找到了一些答案，但不是一个完整的例子，我仍然对这个有疑问

因此，我将从Spring控制器向jsp添加一个自动填充列表，并希望在javascript/jquery函数中添加列表上的项目。可能吗

我尝试了下面的代码来测试功能，但没有成功（列表元素在生成的html中根本没有显示）。所以我不确定我是弄乱了javascrit/spring/jsp语法，还是根本不可能

代码如下：

控制器代码：

@RequestMapping(value="/create_custobject.html",method = RequestMethod.GET)
public ModelAndView showCreateCustObjectPage() {
    Map<String, Object> model = new HashMap<String, Object>();

    CreateObjectForm form = new CreateObjectForm();
    model.put("createObjectform", form);

    return new ModelAndView("create_custobject", model) ;

}

javascript/jquery代码（与jsp代码在同一页上）：

$（文档）.ready（函数（）{
//启动功能
var i=0；
document.getElementById（“addCriteria”）.onclick=function（）{
$（“#msgid”）.html（“${ruleArray[i].attribute}”）；
${ruleArray[i].attribute}=$（'#attributeValue'）.val（）；
${ruleArray[i].operator}=$（'#operatorValue'）.val（）；
i++；
}
}

您的JSP EL和Javascript混合不正确。您不能在JSP表达式中使用

变量i

，即

${ruleArray[i].operator}

。我建议使用JSTL迭代列表并在脚本中创建属性

此时，可以将脚本设置为仅在表达式中使用字符串文字

0

$(document).ready(function(){
     document.getElementById("addCriteria").onclick = function() {

     $("#msgid").html("${ruleArray[0].attribute}");

     //I assume you wanted to set the element to the value pulled from JSP EL
     $('#attributeValue').val(${ruleArray[0].attribute});           
     $('#operatorValue').val(${ruleArray[0].operator});           

     }
 }

使用JSTL，解决方案看起来像：

<script>
 var criteria = [];
 <c:forEach var="criteria" items=${ruleArray}>
    criteria.push({attr:${criteria.attribute}, oper: ${criteria.operator});
 </c:forEach>

 for(var i = 0; i < criteria.length; i++){
  alert(criteria[i].attribute);
 }
</script>

var标准=[]；
push（{attr:${criteria.attribute}，oper:${criteria.operator}）；
对于（变量i=0；i

---

此解决方案基本上使用JSTL编写Javascript。修改控制器以返回JSON并在页面加载时进行Ajax调用可能是更好的解决方案。

您的JSP EL和Javascript混合不当。您不能在JSP表达式中使用

var i

，即

${ruleArray[i].operator}

。我建议使用JSTL迭代列表并在脚本中创建属性

此时，可以将脚本设置为仅在表达式中使用字符串文字

0

$(document).ready(function(){
     document.getElementById("addCriteria").onclick = function() {

     $("#msgid").html("${ruleArray[0].attribute}");

     //I assume you wanted to set the element to the value pulled from JSP EL
     $('#attributeValue').val(${ruleArray[0].attribute});           
     $('#operatorValue').val(${ruleArray[0].operator});           

     }
 }

使用JSTL，解决方案看起来像：

<script>
 var criteria = [];
 <c:forEach var="criteria" items=${ruleArray}>
    criteria.push({attr:${criteria.attribute}, oper: ${criteria.operator});
 </c:forEach>

 for(var i = 0; i < criteria.length; i++){
  alert(criteria[i].attribute);
 }
</script>

var标准=[]；
push（{attr:${criteria.attribute}，oper:${criteria.operator}）；
对于（变量i=0；i

---

此解决方案基本上使用JSTL编写Javascript。修改控制器以返回JSON并在页面加载时进行Ajax调用可能是更好的解决方案。

在下面的一行中，您在jsp代码中引用了

i

，但未定义i:

$("#msgid").html("${ruleArray[i].attribute}");

---

定义

i

的javascript代码在客户端（即浏览器）上执行。在将呈现的html发送到客户端之前，jsp代码在服务器上执行。

在以下行中，您在jsp代码中引用

i

，但未定义i：

$("#msgid").html("${ruleArray[i].attribute}");

---

定义

i

的javascript代码在客户端（即浏览器）上执行。在将呈现的html发送到客户端之前，jsp代码在服务器上执行。

对于表单中的现有项，请使用jstl作为

<c:forEach items="${form.items}" var="item" varStatus="status" >
<span class="count" > 
<form:input   path="items[${status.index}].field" />

这将呈现这样的形式

<form id = "idform" >
<span class="count" > 
    <input   name="items[0].field"  id="items0.field" />
</span>
</form>

然后，您只需使用javascript添加带有相应索引的新表单“行”

比如说

 var is = $('.count').size()
 $('#idform span:last').after('<span class="count" ><input name="items[' + is + '].field"' + is + '.field" /></span>')

var is=$（'.count'）.size（）
$（'#idform span:last'）。对于表单中的现有项，在（'之后使用jstl作为

<c:forEach items="${form.items}" var="item" varStatus="status" >
<span class="count" > 
<form:input   path="items[${status.index}].field" />





这将呈现这样的形式

<form id = "idform" >
<span class="count" > 
    <input   name="items[0].field"  id="items0.field" />
</span>
</form>



然后，您只需使用javascript添加带有相应索引的新表单“行”

比如说

 var is = $('.count').size()
 $('#idform span:last').after('<span class="count" ><input name="items[' + is + '].field"' + is + '.field" /></span>')

var is=$（'.count'）.size（）
$（'#idform span:last'）。在（'之后，即使此线程较旧并且回答正确，也为了其他初学者的利益，并解释实现删除添加行的逻辑

让我用名字、电子邮件、用户名和性别字段的简单代码和用户示例进行解释。

考虑到您正在从控制器发送usersList中的3个空用户，这将创建3个空行。现在您需要添加行并将添加的行动态绑定到modelAttribute

（对于最初的3行）如果您检查/查看页面源，您将看到


具有不同id的行（
标记
），如
list0.firstName
list1.firstName


具有不同的名称的行（
标记
），如
列表[0]。名字
列表[1]。名字



无论何时提交表单，服务器都不会考虑id（添加id仅用于帮助客户端验证），但名称属性将被解释为请求参数，并用于构造modelAttribute，因此在插入行时属性名称非常重要

添加行
那么，如何构造/追加新行呢？

如果我从UI提交6个用户，控制器应该从usersList接收6个用户对象。实现相同目标的步骤如下所示

1.右键单击
->
查看页面源代码。您将看到这样的行（您可以在第一行看到
*[0].
，在第二行看到
*[1].
）


男性
女性
男性
女性

复制第一行并构造javascript字符串，并在中用变量名替换“0”