使用Spring Boot在同一页面上重复提交表单
Recurrent form submission on the same page using Spring Boot
我有一个包含两个部分的页面:第一部分是表单,第二部分显示提交时表单的响应。该表单接受来自附加的网络摄像头的图像。因此,我必须使用Webcam js包装器:https://github.com/jhuckaby/webcamjs表单提交需要是一个重复的过程,这意味着,一旦提交了表单,第二部分将显示表单结果,并且需要使用相同的页面再次提交表单。我使用Spring Boot/Thymeleaf来完成这个。我的部分代码如下:
form.html
<form name="mainform" action="">
<input type="text" name="sbid[]" id="sbid">
<td><input type="submit" value="Compare" onclick="submit_snapshot()"/></td>
</form>
<div id="resdiv">
<div><img src="images/imgnew.jpg" alt="" width="100%" height="220" /></div>
<p> This is part of the second div</p>
</div>
<script>
function submit_snapshot() {
url=url+'sbid[]='+batchId[i].value;
//alert(url);
var batchId=document.getElementsByName('sbid[]');
var url='/imagecompare-0.1.0/compare?';
for(var i=0; i<batchId.length-1; i++){
url=url+'sbid[]='+batchId[i].value+'&';
}
Webcam.upload( webcamuri, url, function(code, text) {
document.write(text);
} );
}
</script>
控制器代码如下:
@CrossOrigin
@RequestMapping(method = RequestMethod.POST, value = "/compare")
public String handleCompare(@RequestParam("sbid[]") String sbid[],
@RequestParam("webcam[]") MultipartFile webcamFiles[],
RedirectAttributes redirectAttributes, Model model) throws IOException {
return "formresults";
}
formresults页面几乎与form.html相同,只是第二个名为resdiv的div具有不同的数据:
<div id="resdiv">
<div><img src="images/imgnew.jpg" alt="" width="100%" height="220" /></div>
<p> This is part of the result div</p>
</div>
然而,这种设计似乎不起作用。从form.html提交的表单正确地重定向到formresults并显示数据。但是,如果我从表单结果页面执行后续表单请求,则不会显示正确的表单响应。相反,它会自动重定向回form.html。有没有人能帮忙指出为什么会发生这种行为?
终于解决了这个问题。这里的问题是下面的语句:
<form name="mainform" action="">
由于表单是由XHR单独提交的,因此这个空白的action
标记强制页面返回到先前的页面。我尝试删除form
标签,现在它正在工作。
相关文章:
- Jquery提交表单而不刷新
- 如何在提交表单时将PHP变量传递到Javascript cookie中
- 每次提交表单时都会重新加载网页
- Razor中的自动提交表单
- 使用 JavaScript 自动提交表单
- 点击相同的按钮打开模型,然后提交表单
- 添加和删除隐藏字段数组中的值,而不提交表单
- 使用Ajax提交表单
- jQuery:使用“jQuery验证”后无法提交表单's远程验证
- 如何在不重新加载的情况下提交表单,并使用Node+Express将数据传递回同一页面
- 有登录表单时无法提交表单
- 带有select的jquery提交表单不起作用
- 如何防止回车键提交表单,但仍然允许回车工作
- 使用按钮和单选按钮提交表单,但始终使用相同的值
- 在提交表单之前确定重复值
- 如何创建动态ajax提交表单
- HTML提交表单,同时包含空字段检查和按钮隐藏
- 如何使用jQueryAjax使用动态html输入texbox提交表单
- 当触发下拉列表的onchange事件时,使用JavaScript提交表单
- 提交表单后,Watir文本框输入未持续(重置为以前的文本框输入)