Php 如何在引导模式下验证登录信息而不转到其他页面？

我在我的网站上构建了一个登录功能，用户需要启动一个引导模式来登录。但当用户输入错误的名称或密码时，它会指示其他页面显示错误消息。我想在模式中显示错误消息，而不是转到其他页面。我看到了一些使用ajax的例子。然而，我是jquery的新手，我不知道应该包括什么来执行ajax登录验证

//模态

<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" 
aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-light">
<div class="modal-header bg-dark">
<h4 class="col-12 text-center text-white comp ">Sign in</h4>
</div>
<div class="modal-body mx-3">
<form action="authentication.php" method="post">
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<label data-error="wrong" data-success="right" for="defaultForm- 
email">Username:</label>
<input type="text" name="username" class="form-control validate">
</div>

<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<label data-error="wrong" data-success="right" for="defaultForm- 
pass">Password:</label>
<input type="password" name="password" class="form-control validate">

</div>
<form>
</div>
<div class="modal-footer d-flex justify-content-center bg-primary">
<button type="submit" class="btn btn-default text-white 
comp">Login</button>
</div>
</div>
</div>
</div>

我希望在表单中内联显示错误消息。谢谢你的帮助

 <a href="" class="btn btn-secondary btn-rounded login" data- 
 toggle="modal" 
 data-target="#modalLoginForm">Login</a>

 <div class="login-container"></div>

//新的php文件

 <script type="text/javascript">
 $('#loginForm').on('submit', function( event ) {
 // prevent the default submit
 event.preventDefault();
 var form = $(this);
 $.ajax({
    url: "authentication.php", 
    type: "POST",
    // use the forms data
    data: form.serialize(),
    beforeSend: function() {    
        console.log( "Processing..." );
    },
    success: function( response ){
        // do sth with the response
        if(response == "OK") {
           // credentials verified
           // redirect
         location.reload();
        }else{
           // credentials incorrect
           // append errormessage to modal
           form.closest('.modal-body').append('<div class="error text- 
    danger">*'+response+'</div>');
        }
    },
    error: function( response ) {
       console.log(response);
    }

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

    <div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" 
    aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content bg-light">
    <div class="modal-header bg-dark">
    <h4 class="col-12 text-center text-white comp ">Sign in</h4>
    </div>
    <div class="modal-body mx-3">
    <form action="authentication.php" method="post">
    <div class="md-form mb-5">
    <i class="fas fa-envelope prefix grey-text"></i>
    <label data-error="wrong" data-success="right" for="defaultForm- 
    email">Username:</label>
    <input type="text" name="username" class="form-control validate">
    </div>

    <div class="md-form mb-4">
    <i class="fas fa-lock prefix grey-text"></i>
    <label data-error="wrong" data-success="right" for="defaultForm-  
    pass">Password:</label>
    <input type="password" name="password" class="form-control validate">

    </div>
    <form>
    </div>
    <div class="modal-footer d-flex justify-content-center bg-primary">
    <button type="submit" class="btn btn-default text-white 
    comp">Login</button>
    </div>
    </div>
    </div>
    </div>

---

使用ajax拦截表单提交的默认行为是正确的。首先，您需要在您的网站中实现，以便可以使用ajax

之后，您需要截取来自submit的默认值：

// give your form an id
<form id="loginForm" ... > ...

截取并提交：

$('#loginForm').on('submit', function( event ) {
   // prevent the default submit
   event.preventDefault();
   var form = $(this);
   $.ajax({
        url: "authentication.php", 
        type: "POST",
        // use the forms data
        data: form.serialize(),
        beforeSend: function() {    
            console.log( "Processing..." );
        },
        success: function( response ){
            // do sth with the response
            if(response === "OK") {
               // credentials verified
               // redirect
            }else{
               // credentials incorrect
               // append errormessage to modal
               form.closest('.modal-body').append('<div class="error">'+response+'</div>');
            }
        },
        error: function( response ) {
           console.log(response);
        }

});
});

成功回调中的响应将获取php脚本打印出来的内容，以便您可以执行以下操作：例如，echo OK；如果凭据正确且会话已启动。在其他情况下，响应将附加到模态体

---

顺便说一句，您不应该在数据库中以纯文本形式存储密码。始终使用某种哈希来存储它们

您是按原样提交表单，还是使用任何js/jquery逻辑拦截提交？既然您的表单应该只提交数据到您的AudioTest.PHP并打印您的一个错误或一个空白页，以防成功。我将数据发送到AudioTest.PHP，并在空白页中得到错误MSG，如果我输入错误的数据，如果输入正确的帐户，我将带会话存储到主页。js部分只是我的概念，在我的网站上不起作用。谢谢Lapskaus。我要试一试。但是我可以知道函数response{}中response的含义吗？该参数何时声明？谢谢这只是ajax传递到回调中的参数，您可以随意命名它，它总是来自ajax调用的响应数据。成功与否的区别是什么：函数响应{}和ifresponse==OK{}？我发现第二条语句可以在php中调用我的echo消息。但是我不知道在成功中应该做什么：函数响应{}。此外，是否有任何方法在关闭或单击后引用模式？我不希望上一条消息停留在模态中。谢谢你的帮助！你无法比较这两种说法。功能反应{…是匿名回调的函数声明，后者是该函数体中的一个简单条件语句。由于您似乎在使用引导模式，因此在关闭模式时会调用一个事件。您可以附加一个侦听器，并在关闭模式时重置模式，但这远远超出了这个问题。请阅读Bootstrap文档和jquery文档非常感谢你，Lapskaus。我想我理解这个函数是如何工作的。

 <script type="text/javascript">
 $('#loginForm').on('submit', function( event ) {
 // prevent the default submit
 event.preventDefault();
 var form = $(this);
 $.ajax({
    url: "authentication.php", 
    type: "POST",
    // use the forms data
    data: form.serialize(),
    beforeSend: function() {    
        console.log( "Processing..." );
    },
    success: function( response ){
        // do sth with the response
        if(response == "OK") {
           // credentials verified
           // redirect
         location.reload();
        }else{
           // credentials incorrect
           // append errormessage to modal
           form.closest('.modal-body').append('<div class="error text- 
    danger">*'+response+'</div>');
        }
    },
    error: function( response ) {
       console.log(response);
    }

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

    <div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" 
    aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content bg-light">
    <div class="modal-header bg-dark">
    <h4 class="col-12 text-center text-white comp ">Sign in</h4>
    </div>
    <div class="modal-body mx-3">
    <form action="authentication.php" method="post">
    <div class="md-form mb-5">
    <i class="fas fa-envelope prefix grey-text"></i>
    <label data-error="wrong" data-success="right" for="defaultForm- 
    email">Username:</label>
    <input type="text" name="username" class="form-control validate">
    </div>

    <div class="md-form mb-4">
    <i class="fas fa-lock prefix grey-text"></i>
    <label data-error="wrong" data-success="right" for="defaultForm-  
    pass">Password:</label>
    <input type="password" name="password" class="form-control validate">

    </div>
    <form>
    </div>
    <div class="modal-footer d-flex justify-content-center bg-primary">
    <button type="submit" class="btn btn-default text-white 
    comp">Login</button>
    </div>
    </div>
    </div>
    </div>

// give your form an id
<form id="loginForm" ... > ...

$('#loginForm').on('submit', function( event ) {
   // prevent the default submit
   event.preventDefault();
   var form = $(this);
   $.ajax({
        url: "authentication.php", 
        type: "POST",
        // use the forms data
        data: form.serialize(),
        beforeSend: function() {    
            console.log( "Processing..." );
        },
        success: function( response ){
            // do sth with the response
            if(response === "OK") {
               // credentials verified
               // redirect
            }else{
               // credentials incorrect
               // append errormessage to modal
               form.closest('.modal-body').append('<div class="error">'+response+'</div>');
            }
        },
        error: function( response ) {
           console.log(response);
        }

});
});