使用 Spring Boot 在同一页面上重复提交表单答案

【问题标题】：Recurrent form submission on the same page using Spring Boot使用 Spring Boot 在同一页面上重复提交表单
【发布时间】：2017-03-22 21:48:49
【问题描述】：

我有一个包含两个部分的页面：第一部分是表单，第二部分显示提交时表单的响应。该表单接受来自附加网络摄像头的图像。因此，我必须使用来自：https://github.com/jhuckaby/webcamjs 的 Webcam js 包装器表单提交需要是一个循环过程，这意味着，一旦提交表单，第二部分会显示表单结果，并且需要使用同一页面再次提交表单。我正在使用 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 并显示数据。但是，如果我从 formresults 页面执行后续表单请求，它不会显示正确的表单响应。相反，它会自动重定向回 form.html。有人可以帮忙指出为什么会发生这种行为。

【问题讨论】：

标签： javascript java spring-boot xmlhttprequest

【解决方案1】：

我终于解决了这个问题。这里的问题是以下语句：

<form name="mainform"   action="">

由于表单是由 XHR 单独提交的，这个空白的action 标签会强制页面返回到之前的页面。我尝试完全删除 form 标签，现在它可以工作了。

【讨论】：