Question

我有一个运行此index.php的XAMPP 7.1.10-0服务器

<?php
    if(isset($_POST["username"])) {
        echo $_POST;
        header("Location:getbooks.php");
        exit;
    } else {    
        echo file_get_contents("login.html");
    }
?>

这最初工作并显示login.html文件。然后我想再次对此文件进行ajax调用以切换到另一个html文件。所以login.js会这样做。

window.onload = function() {
    var button = document.getElementById("submit");
    button.onclick = function() {
    var user = document.getElementById("username").value;
    var pass = document.getElementById("password").value;
    var data = {"username": user, "password": pass};
    data = $(this).serialize() + "&" + $.param(data);
        $.post('index.php', data, function(response) {
            console.log(response);
        });
    }
}

正如您可以想象的那样，点击了一个按钮，当它点击Ajax时，就会进行调用。当我单击按钮时，它不会更改标题，因此不会更改页面。有人会知道我做错了吗？

Answer 1

如果要重定向，可以使用AJAX成功方法。

login.html：

<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
</head>
<body>
    <div class="form">
        Username: <input id="username" type="text"></input> <br>
        Password: <input id="password" type="password"></input> <br>
        <button id="submit">Submit</button>
    </div>
    <!-- jQuery -->
    <script
    src="https://code.jquery.com/jquery-1.12.4.min.js"
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
    crossorigin="anonymous"></script>   
    <script type="text/javascript">
        $(document).ready(function(){
            var button = document.getElementById("submit");
            button.onclick = function() {
            var user = document.getElementById("username").value;
            var pass = document.getElementById("password").value;
            $.ajax({
                url: 'index.php',
                data: {
                    "username" : user,
                    "password" : pass
                },
                type: 'POST',
                success: function(response) {
                    window.location = response;
                },
                error: function(error) {
                }
            });     
            }       
        })
    </script>
</body>
</html>

index.php：

<?php
    if(isset($_POST["username"])) {
        //process the array
        echo "getbooks.php";
    } else {    
        echo file_get_contents("login.html");
    }
?>

除此之外，您还可以在AJAX中处理来自PHP的响应，以更新页面视图而无需重定向。

如何使用XAMPP PHP发送和接收JSON

1 个答案: