修改一个div是由Ajax响应

Question

HTML是这样在与内容的模式里面的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脚本代码是这样以下几点：

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 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){ 
         window.location = "http://r"; 
        } else { 
         $('#myModal.login_error').html('Invalid Credentials. Please try again.'); 
        } 

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

        alert (xhr.status); 

       } 
      }); 
     };