CoderAnswer - 程序员编程问答

在php中使用echo内部的脚本标签调用bootstrap模式,但不起作用

by @vishal mehra

javascript php html bootstrap-modal

我正在创建一个登录页面,如果用户输入了错误的凭据,那么将出现一个说明无效凭据的引导对话框。一切都工作正常,但我坚持在回声中的PHP和脚本标签中的会话。

如果我把我的PHP代码放在页面的末尾那么php中的echo函数内的脚本标签工作正常,所以也调用了bootstrap模型但是如果把我的php代码放在文档的开头那么脚本标签不会工作,因此不会调用bootstrap模型。

如果我把我的PHP代码放在html代码下面,那么在提交表单之后再次加载相同的页面并且会话也被创建但在此之前所有这些html内容已经加载,因此php中的头函数不会作品。

我试图在HTML之前和之后放置代码,但没有任何帮助。

<?php
在session_start();
如果(isset($ _ SESSION['uname'])){
    header('location:admin_panel.php');
}其他{
        if(isset($_POST['submit'])){
            $uname = $_POST['uname'];
            $pwd = $_POST['pwd'];
            include 'connect.php';
            $sql = 'SELECT * from login where uname = "'.$uname.'"';
            $result  = mysqli_query($conn,$sql);
            if(mysqli_num_rows($result)!=1){
                echo "<script type='text/javascript'>$('#uModal').modal('show');</script>";
            }其他{
                $row = mysqli_fetch_array($result,MYSQLI_ASSOC);
                if(password_verify($pwd, $row['pwd']) || password_verify($pwd, $row['tmp_pwd'])){
                    $_SESSION['uname'] = $uname;
                    header('location:admin_panel.php');
                }
                else{
                    echo "<script type='text/javascript'>$('#pModal').modal('show');</script>";
                }
            }    
        }
    }
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Admin Login</title>
        <link rel="stylesheet" href="assets/css/bs.min.css">
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/bs.min.js"></script>
        <script src="assets/js/popper.min.js"></script>
        <style type="text/css">
            body{
            background: #9053c7;
            height: 100%;
            width: 100%;
            background: -webkit-linear-gradient(-135deg, #c850c0, #4158d0) contain;
            background: -o-linear-gradient(-135deg, #c850c0, #4158d0) contain;
            background: -moz-linear-gradient(-135deg, #c850c0, #4158d0) contain;
            background: linear-gradient(-135deg, #c850c0, #4158d0) contain;
            }
            .box{
            margin: 8%;
            border-radius: .8%;
            height:100vh;
            }
            .box-content{
            padding:10%;
            }
            input[type='text'],input[type='password']{
            background: transparent;
            border-left: 0;
            border-right: 0;
            border-bottom: 1px solid grey;
            border-top: 0;
            outline: none;
            width:auto!important;
            }
            input[type='text']:focus,input[type='text']:hover ,input[type='password']:focus, input[type='password']:hover {
            border-bottom: 2px solid grey;
            }
        </style>
    </head>
    <body>
    <div class="modal fade" id="uModal" tabindex="-1" role="dialog" aria-labelledby="modalUser" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalUser">Invalid login details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
                <div class="modal-body">
                    Wrong Username
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="pModal" tabindex="-1" role="dialog" aria-labelledby="modalPass" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalPass">Invalid login details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
                <div class="modal-body">
                    Wrong Password
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
        <div class="home-btn" style = "postion:sticky;">
            <a href="index.php"><button class="btn btn-dark">Home</button></a>
        </div>
        <div class="container-fluid" style="text-align: center; ">
            <div class="row">
                <div class="col-12">
                    <div class="box" style="background: #fff; ">
                        <div class="box-content">
                            <h2>Admin Login</h2>
                            <form action="" method="POST" class="needs-validation" novalidate>
                                <div class="form-group">
                                    <input type="text" name="uname" class="uname form-control" style="margin: 5% auto 0 auto; " placeholder="Username" required><br/>
                                </div>
                                <div class="form-group">
                                    <input type="password" name="pwd" class="pwd form-control" style="margin: 0 auto 5% auto;"  placeholder="Password" required><br/>
                                </div>
                                <div class="form-group">
                                    <input type="submit" name="submit" class="submit btn btn-dark" value="Login">
                                </div>
                                <div class="form-group">
                                    <a href='password_recovery.php'>Forgot Password</a>
                                </div>
                            </form>
                            <script>
                                (function() {
                                    'use strict';
                                    window.addEventListener('load', function() {
                                        //获取我们要将自定义Bootstrap验证样式应用到的所有表单
                                        var forms = document.getElementsByClassName('needs-validation');
                                        //遍历它们并阻止提交
                                        var validation = Array.prototype.filter.call(forms, function(form) {
                                            form.addEventListener('submit', function(event) {
                                                if (form.checkValidity() === false) {
                                                    event.preventDefault();
                                                    event.stopPropagation();
                                                }
                                                form.classList.add('was-validated');
                                            }, false);
                                        });
                                    }, false);
                                })();
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
<?php
如果(isset($康恩)){
if(is_resource($ conn)&& get_resource_type($ conn)==='mysql link'){
    mysqli_close($conn); //Procedural style 
}}
?>

如果表单已提交,则应验证该表单,如果登录凭据错误,则应显示引导模式。在有效凭据上,应显示管理面板页面。


1个答案

0 by @Chirag Jain

您可以使用die()exit()保留重定向代码。 net / manual / en / function.exit.php)然后你的HTML然后是POST代码。

<?php
session_start();
if(isset($_SESSION['uname'])){
    header('location:admin_panel.php');
    die();
}
?>

//你的HTML东西

<?php
if(isset($_POST['submit'])){
            $uname = $_POST['uname'];
            $pwd = $_POST['pwd'];
            include 'connect.php';
            $sql = 'SELECT * from login where uname = "'.$uname.'"';
            $result  = mysqli_query($conn,$sql);
            if(mysqli_num_rows($result)!=1){
                echo "<script type='text/javascript'>$('#uModal').modal('show');</script>";
            }else{
                $row = mysqli_fetch_array($result,MYSQLI_ASSOC);
                if(password_verify($pwd, $row['pwd']) || password_verify($pwd, $row['tmp_pwd'])){
                    $_SESSION['uname'] = $uname;
                    header('location:admin_panel.php');
                }
                else{
                    echo "<script type='text/javascript'>$('#pModal').modal('show');</script>";
                }
            }    
        }

if(isset($conn)){
if(is_resource($conn) && get_resource_type($conn)==='mysql link'){
    mysqli_close($conn); //Procedural style 
}}

?>

相关问题