我在我的一个项目中使用Spring MVC控制器。
下面是我的JSP代码,其中将显示三个单选按钮。一个是Insert
,第二个单选按钮是Update
,第三个单选按钮是Delete
。
点击Insert
单选按钮后,它会在“插入”单选按钮旁边显示两个文本框,同样会显示其他两个单选按钮 -
<script type="text/javascript">
function doDisplay(radio) {
switch (radio.value) {
case "Insert":
document.getElementById("inserts").style.display = "inline";
document.getElementById("updates").style.display = "none";
document.getElementById("delete").style.display = "none";
document.getElementById("dynamicName").value = "insert";
break;
case "Update":
document.getElementById("inserts").style.display = "none";
document.getElementById("updates").style.display = "inline";
document.getElementById("delete").style.display = "none";
document.getElementById("dynamicName").value = "update";
break;
case "Delete":
document.getElementById("inserts").style.display = "none";
document.getElementById("updates").style.display = "none";
document.getElementById("delete").style.display = "inline";
document.getElementById("dynamicName").value = "delete";
break;
}
}
</script>
<body>
<form method="post" action="testOperation">
<!-- I used only one hidden box to store value -->
<input type="hidden" name="name" id="dynamicName">
<input type="radio" name="tt" value="Insert"
onclick="doDisplay(this);" /> Insert <span id="inserts"
style="display: none"> <label for="Node"> Node </label> <input
type="text" name="node" size="20" /> <label for="Data"> Data </label>
<input type="text" name="data" size="100" />
</span> <br /> <input type="radio" name="tt" value="Update"
onclick="doDisplay(this);" /> Update <span id="updates"
style="display: none"> <label for="Node"> Node </label> <input
type="text" name="node" size="20" /> <label for="Data"> Data </label>
<input type="text" name="data" size="100"/>
</span> <br /> <input type="radio" name="tt" value="Delete"
onclick="doDisplay(this);" /> Delete <span id="delete"
style="display: none"> <label for="Node"> Node </label> <input
type="text" name="node" size="20" /> <label for="Data"> Data </label>
<input type="text" name="data" size="100"/>
</span> <br />
<input type="submit">
</form>
以下是控制器代码 -
@RequestMapping(value = "testOperation", method = RequestMethod.GET)
public Map<String, String> testOperation() {
final Map<String, String> model = new LinkedHashMap<String, String>();
return model;
}
@RequestMapping(value = "testOperation", method = RequestMethod.POST)
public Map<String, String> testOperations(@RequestParam String name,
@RequestParam String node,
@RequestParam String data) {
final Map<String, String> model = new LinkedHashMap<String, String>();
System.out.println(name);
System.out.println(node);
System.out.println(data);
return model;
}
假设我点击Insert
单选按钮并在第一个文本中输入Hello
,在第二个文本框中输入World
,然后我会点击提交按钮,之后我会看到insert
变量中的name
值,hello,,
变量中的node
值和world,,
变量中的data
值不想要。
与更新和删除相同。
有什么方法可以避免这种情况吗?这意味着我希望节点变量中只有hello
值,world
变量中只有data
值,而不是用逗号分隔。?
任何人都可以帮我吗?
答案 0 :(得分:2)
单击单选按钮,您只需为用户隐藏字段,但params仍然可见并通过POST请求发送。在春天,具有相同名称的params被视为一个数组。如果您不想发送具有相同名称的乘法参数,则不仅应隐藏输入,还应从jquery中调用以下代码将其删除
$('#input-id').remove();
请记住,您还必须通过单击单选按钮来添加字段。我找到了一个如何实现的例子:
http://jsfiddle.net/jaredwilli/tZPg4/4/
您可以在此处找到更多信息Add / remove input field dynamically with jQuery
EDIT
根据您的评论,我建议您使用此代码http://jsfiddle.net/tFLnd/
它要短得多,也许不是最好的,因为我刚刚写了它但是做了工作
当然你必须在页面中添加jQuery才能使用这段代码