通過AJAX提交后如何顯示模式形式

Question

我在模態表單中有一個登錄名。 提交表單后，我收到成功或失敗的消息。表示失敗消息。 但是當我重新打開模態時，相同的消息出現而不是登錄表單。 刷新頁面后，只有模態顯示登錄表單。

這是我的代碼....請幫助我如何解決它，以便在我提交后重新打開模態時顯示登錄表單。

    <!--  Sign in feature starts here --> 
<div id="sign_in" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Sign In</h4>
      </div>
      <div class="modal-body">
<div class="panel-body" id="form">
 <form class="form-horizontal" role="form" method="post" id="log-in" >
  <fieldset>
                                <div class="form-group">
                               <input class="form-control" id="username" placeholder=" Username or Mobile No." type="text" autofocus  AutoComplete=off required>
                                </div>
                                <div class="form-group">
                               <input class="form-control" id="password" placeholder=" Enter Password" type="password" autofocus  AutoComplete=off required>
                                </div>
                                 <!-- Change this to a button or input when using this as a form -->
                                <button class="btn btn-lg btn-success btn-block" type="submit">Sign In</button>
                            </fieldset>
  </form> </div>
</div>
          </div> 
</div></div>
 <!--  Sign In feature ends here -->
<script type="text/javascript">
$(document).ready(function()
{   
    $(document).on('submit', '#log-in', function()
    {
        var data = $(this).serialize();
        $.ajax({
        type : 'POST',
        url  : '<?php echo site_url('verifylogin');?>',
        data : data,
        success :  function(data)
                   {                        
                        $("#log-in").fadeOut(500).hide(function()
                        {
                            $("#form").fadeIn(500).show(function()
                            {
                                $("#form").html(data);
                                if(data != null && data == "success"){ //redirect...
                        window.location.replace('home.php');
                }
                            });
                        });

                   }
        });

        return false;
    });
});
</script>

Answer 1

問題出在$("#form").html(data); 為什么要刪除HTML表單並將其替換為所接收的數據？

你什么時候在表格中放回表格HTML？ 它在刷新后工作，因為頁面再次加載。

在前一種情況下，您已更新DOM，刪除了表單HTML並將其替換為您收到的數據。 因此，下次打開模態時，您將看到相同的數據。

Answer 2

嘗試改變這部分

 $("#form").html(data);
 if(data != null && data == "success")
 { //redirect...
       window.location.replace('home.php');
 }

至

 $("#form").html(data);

即刪除此部分

 if(data != null && data == "success")
 { //redirect...
       window.location.replace('home.php');
 }

還要將該div添加到代碼中的某個位置； 這是從您的PHP代碼返回結果的div。

<div id="form"></div>

如果重定向是您的成功。 然后在PHP代碼的成功定義中添加重定向代碼，即

<?php

echo 'please wait! redirecting...';
echo "<script>window.location.href='home.php';</script>";

?>

Ajax無法理解PHP對成功的意義。 失敗可能是另一個人的成功和另一個人的失敗。

在您的問題中，如果有人輸入了錯誤的用戶名或密碼。 它很可能重定向，因為這也是成功的。

希望這可以幫助