如何將Bootstrap Modal表單數據傳遞到Spring Boot控制器

Question

如果我有彈出窗口，使用Bootstrap Modal打開，並且在此我有一個可以將數據放入的窗體，我怎樣才能將這些數據傳遞給Spring控制器更新我的數據庫？

Answer 1

我有同樣的問題，我找到解決方案使用ajax，因爲每次提交的值你的網頁刷新和模式關閉。

這裏是我的模態形式：

<!-- Modal --> 
     <div class="modal fade" id="loginModal"> 
      <div class="modal-dialog"> 

       <!-- Modal content--> 
       <div class="modal-content"> 
        <div class="modal-header" style="padding:35px 50px;"> 
         <button type="button" data-dismiss="modal" class="close">&times;</button> 
         <h4><span class="glyphicon glyphicon-lock"></span> Iniciar sesion</h4> 
        </div> 
        <div class="modal-body" style="padding:40px 50px;">      
         <form id="login-form" action="${contextPath}/j_spring_security_check" method="POST" name="loginForm"> 
          <div class="form-group"> 
           <label for="usrname" ><span class="glyphicon glyphicon-user"></span> Correo</label> 
           <input type="text" class="form-control" name="correo" id="correo"> 
          </div> 
          <div class="form-group"> 
           <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Contraseña</label> 
           <input type="password" class="form-control" name="password"> 
          </div> 
          <div class="checkbox"> 
           <label><input type="checkbox" value="" checked>Remember me</label> 
          </div> 
          <div class="form-group"> 
           <button type="submit" id="loginBtn" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Iniciar sesion </button> 
          </div> 

         </form> 
         <hr/> 
         <div id="errorMsg">${error}</div> 
        </div> 
        <div class="modal-footer"> 
         <p>¿No tenes cuenta? <a href="${contextPath}/singup">Registrate</a></p> 
         <p>Olvidates tu <a href="#">contraseña?</a></p> 
        </div> 
       </div> 
      </div> 
     </div> 

Ajax調用：

$('#login-form').on('submit', function(event){ 

    var self = this; 
    var form = $(this); 
    var errorMsg = $('#errorMsg'); 


    if (form.data('requestRunning')) { 
     return; 
    } 

    form.data('requestRunning', true); 
    event.preventDefault(); 
    $.ajax({ 
     url: form.attr("action"), 
     type: form.attr("method"), 
     data: form.serialize(), 
     success: function(result){ 

      console.log(result.login); 
      if(result.login == undefined){ 
       self.submit(); 
      }else{ 
       errorMsg.text(result.login.FAILURE).addClass("alert alert-danger"); 
       agitar('#errorMsg'); 
      } 

     }, 
     complete: function (e) {    
      form.data('requestRunning', false); 
     } 

    }); 

}); 

這裏我使用彈簧安全來驗證我的用戶登錄，但如果你只需要更新DB在表單動作你可以把你想用打電話給你的控制器即URL：「/ updatedb的」，並宣佈一個控制器，即：

@RequestMapping("/updateDB", method=RequestMethod.POST) 
public String updateDB(@ModelAttribute("dataToUpdate")DataToUpdate dataToUpdate){ 
    //do whathever you want 
} 

希望得到這個幫助！