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

Jquery 使用ajax响应中的内容修改模态中div的html,jquery,html,ajax,Jquery,Html,Ajax,HTML如下所示:简单的登录表单 <div aria-hidden="true" aria-labelledby="myModalLabel" class="modal hide fade" id="myModal" role="dialog" tabindex="-1"> <div class="modal-header"> <button aria-hidd

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>
$(“#登录错误”).html('无效凭据。请重试');
这是行不通的。我得到了正确的ajax响应,但不知何故我无法正确设置html。

我认为id登录错误在同一页面上多次出现。这样两个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>
<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>
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);

                }
            });
        };