使用Spring Boot在同一頁面上覆製表單提交

我有一個包含兩個部分的頁面：第一部分是表單，第二部分顯示提交時表單的響應。該表格接收來自附加攝像頭的圖像。因此，我必須使用以下Webcam js包裝器：https://github.com/jhuckaby/webcamjs 表單提交需要是一個循環過程，這意味着，一旦表單被提交，第二個部分顯示錶單結果並需要使用相同的頁面再次提交表單。我使用Spring Boot/Thymeleaf來完成此操作。我的部分代碼如下：使用Spring Boot在同一頁面上覆製表單提交

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。有人可以幫助指出爲什麼會發生這種行爲。

來源

2016-11-09 seriousgeek

我終於解決了這個問題。這裏的問題是下面的語句：

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

由於表格是由XHR單獨提交，這個空白action標籤強制頁面返回到前面一頁。我試圖完全刪除form標籤，現在它正在工作。

來源

2016-11-16 19:01:50 seriousgeek

使用Spring Boot在同一頁面上覆製表單提交

回答

相關問題