스프링 부트를 사용하여 같은 페이지에 반복적 인 양식 제출

두 섹션으로 된 페이지가 있습니다. 첫 번째 섹션은 양식이고 두 번째 섹션은 양식을 제출하고 두 번째 섹션은 제출할 때 양식의 응답을 표시합니다. 양식에 부착 된 웹캠의 이미지를 사용할 수 있습니다. 결과적으로 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>

컨트롤러 코드는 다음 formresults 페이지를 제외하고 form.html 거의 같은

@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"; 
}

입니다

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