2016-11-09 1 views
0

Ich habe eine Seite mit zwei Abschnitten: Der erste Abschnitt ist ein Formular und der zweite Abschnitt zeigt die Antwort des Formulars, wenn sie gesendet wird. Das Formular akzeptiert Bilder von einer angeschlossenen Webcam. Als Ergebnis muss ich die Webcam js wrapper verwenden: https://github.com/jhuckaby/webcamjs Die Formularübermittlung muss ein wiederkehrender Prozess sein, das heißt, sobald ein Formular eingereicht wird, zeigt der zweite Abschnitt die Formularergebnisse an und die gleiche Seite muss verwendet werden Übermitteln Sie das Formular erneut. Ich benutze Spring Boot/Thymeleaf um dies zu erreichen. Ein Teil meiner Code ist wie folgt:Wiedervorlage des Formulars auf der gleichen Seite mit 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> 

Der Controller-Code lautet wie folgt:

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

Die formresults Seite ist fast die gleiche wie form.html außer dass das zweite div namens resdiv hat andere Daten:

<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> 

Dieses Design scheint jedoch nicht zu funktionieren. Die Formularübermittlung von form.html leitet die Ergebnisse korrekt zu formulesults um und zeigt die Daten an. Wenn ich jedoch eine nachfolgende Formularanforderung von der formresults-Seite aus führe, wird keine korrekte Formularantwort angezeigt. Stattdessen wird es automatisch zurück in form.html umgeleitet. Könnte jemand helfen, aufzuzeigen, warum dieses Verhalten auftritt.

Antwort

1

Ich habe dieses Problem endlich gelöst. Das Problem dabei war die folgende Erklärung ab:

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

Da die Form von XHR gesondert vorgelegt wird, dieses Feld leer action Tag zwingt die Seite der früheren Seite zurückzukehren. Ich habe versucht, das form Tag insgesamt zu entfernen und jetzt funktioniert es.

Verwandte Themen