Question

好的，所以我想提交一个没有重定向的登录页面。在阅读完相关内容之后，我尝试了AJAX。所以我使用ajax观看了一些关于登录页面的教程。

我的参考资料是此视频：https://www.youtube.com/watch?v=MkGUL7ZRCTA

我想要做的是用户需要先登录。但我不希望页面被重定向。只需检查密码是否与json文件中的密码匹配即可。但是当我尝试它时，控制台日志中没有显示任何内容（我正在使用Firefox）。

我想做这样的事情：http://susheel61.0fees.net/ajaxtest.php 但不是在其下显示用户输入，而是显示“正确密码”或“密码不正确”（在检查匹配后）

以下是我的代码段： HTML

<!DOCTYPE html>
<html>
<head>
<title> AJAX Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
#loginbox{
    width: 240px;
    height: 140px;
    margin: 0px auto;
    margin-top: 300px;
}
</style>
</head>
<body>
<div id="loginbox">
    <input id="password" type="password" placeholder="Enter Password" />

    <button> Submit </button>

</div>
<div id="container"></div>

<script type="text/javascript">

    $("button").click(function (){

        var password = $("#password").val();

        $.post("server.php", {password:password}, function(data){
            console.log(data);
        });

    });
</script>
</body>
</html>

PHP

<?php

if (isset($_POST["password"])){
 $password = $_POST["password"];

 $jsondata = file_get_contents("CONFIG.json");
 $json = json_decode($jsondata, true);

 if ($password == $json["password"]) {
    echo "Welcome";
 } else {
    echo "Wrong Password";
}
}
?>

和我的JSON

{"reset":"12312","sync":"232131","config":"2","bypass":"22","password":"qwerty"}

编辑：我尝试使用windrunn3r的答案。一切正常。但是，我希望如果密码正确，它会显示（隐藏）表单。这是我的新HTML。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> AJAX Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
#loginbox{
    width: 240px;
    height: 140px;
    margin: 0px auto;
    margin-top: 300px;
}
</style>
</head>
<body>

<div id="loginbox">
<div id="message"></div>
    <input id="password" type="password" placeholder="Current Password" />

    <button> Submit </button>
<div id="container"></div>
</div>

<div id="newpass" style="display: none">
    <input id="password" type="password" placeholder="New Password" />

    <button> Submit </button>
</div>

<script type="text/javascript">

$("button").click(function (){

var password = $("#password").val();


    $.ajax({
        url: 'server.php',
        cache: false,
        async: true,
        beforeSend: function () {
            $("#message").html("Checking...");

            console.log(password)
        },
        type: "POST",
        data: { password: password }, //data to post to server
        error: function (data) {
            $("#message").hide();
            $("#container").html("No password was sent");
        }, 
        success: function (data) {
            $("#message").hide();
            console.log(data)
            if (console.log(data)=="Welcome"){
                $("#newpass").show();
            } else {
                $("#container").html("Password Incorrect");
            }
        }
    });
});

    /*$("button").click(function (){

        var password = $("#password").val();

        $.post("server.php", {password:password}, function(data){
            console.log(data);

            if (console.log(data) == "Welcome") {
                document.getElementById("container").innerHTML = "Password Correct!";
            } else {
                document.getElementById("container").innerHTML = "Password Incorrect!";
            }
        });

    });*/
</script>

Answer 1

您可能正在使用错误的Jquery函数。 Jquery.post()（https://api.jquery.com/jquery.post/）只有添加函数以成功执行请求的选项，data这里指的是服务器返回的数据。如果您想在将其发送到服务器之前执行某些操作，可能需要使用$.ajax()来获取更多选项。

$("#submitButton").click(function (){

    var password = $("#password").val();


        $.ajax({
            url: 'server.php',
            cache: false,
            async: true,
            beforeSend: function () {
                //do what you want to do before sending the data to the server

                console.log(password)
            },
            type: "POST",
            data: { password: password }, //data to post to server
            error: function (data) {
                //do something if an error happends
            }, 
            success: function (data) {
                //do something with server's response
                console.log(data)
            }
        });
});

工作小提琴：https://jsfiddle.net/windrunn3r1990/Lh46005f/1/

如何使用ajax读取json文件？

1 个答案: