使用ajax响应中的内容修改模态内部div的html

Question

HTML如下所示：简单登录表单。

<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal hide fade" id="myModal" role="dialog"
                 tabindex="-1">
                <div class="modal-header">
                    <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
                    <h3 id="myModalLabel">Registered Member - Please Login</h3>
                    <div id="login_error"></div>
                </div>
                <div class="modal-body">
                    <form role="form" id="login-form" data-bind="submit: login_user">
                        <div class="row">
                            <div class="span3">
                                <div class="form-group">
                                    <div class="input-group">
                                        <input class="form-control" placeholder="name" name="name" type="text"
                                               autofocus>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group">
                                        <input class="form-control" placeholder="Password" name="password"
                                               type="password" value="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign In</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

表单提交后，KNOCKOUT JS绑定用于触发应该返回数据的ajax调用。

Java Script代码如下：

this.login_user = function(formElement){
            var formData = new FormData($('#login-form')[0]);
            $.ajax({
                url: 'site_api/user_login.php',
                type: 'POST',
                processData: false,
                contentType: false,
                cache: false,
                data: formData,
                success: function(res)
                {
                    if(res > 0){
                        window.location = "http://r";
                    } else {
                        $('#login_error').html('Invalid Credentials. Please try again.');
                    }

                },
                error: function(xhr, ajaxOptions, thrownError)
                {

                    alert (xhr.status);

                }
            });
        };

$（'＃login_error'）。html（'证书无效。请再试一次。'）; 这不起作用。我得到了正确的ajax响应，但不知怎的，我无法正确设置html。

Answer 1

我认为id login_error 在同一页面上多次出现。这样两个id都会互相冲突。我已对您的代码进行了一些更改，请检查

更新的HTML如下所示：简单登录表单。

<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal hide fade" id="myModal" role="dialog"
                 tabindex="-1">
                <div class="modal-header">
                    <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
                    <h3 id="myModalLabel">Registered Member - Please Login</h3>
                    <div id="login_error" class="login_error"></div>
                </div>
                <div class="modal-body">
                    <form role="form" id="login-form" data-bind="submit: login_user">
                        <div class="row">
                            <div class="span3">
                                <div class="form-group">
                                    <div class="input-group">
                                        <input class="form-control" placeholder="name" name="name" type="text"
                                               autofocus>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group">
                                        <input class="form-control" placeholder="Password" name="password"
                                               type="password" value="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign In</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

更新的Java脚本代码如下所示：

this.login_user = function(formElement){
            var formData = new FormData($('#login-form')[0]);
            $.ajax({
                url: 'site_api/user_login.php',
                type: 'POST',
                processData: false,
                contentType: false,
                cache: false,
                data: formData,
                success: function(res)
                {
                    if(res){
                        window.location = "http://r";
                    } else {
                        $('#myModal.login_error').html('Invalid Credentials. Please try again.');
                    }

                },
                error: function(xhr, ajaxOptions, thrownError)
                {

                    alert (xhr.status);

                }
            });
        };