Question

如果我有弹出窗口，使用Bootstrap Modal打开，在这里我有一个可以放数据的表单，如何将这些数据传递给Spring控制器来更新我的sql DB？

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);
       }

    });

});

这里我使用spring-security来验证我的用户登录，但是如果你只想更新你的数据库，你可以在表单操作中输入你想要用来调用你的控制器的URL，即：“/ updateDB “并声明一个控制器即：

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

希望这有帮助！

如何将Bootstrap Modal表单数据传递给Spring Boot控制器

1 个答案: