0
だから、リダイレクトなしでログインページを送信したいと思います。これについての情報を読んだあと、AJAXを試しました。だから私はajaxを使ってログインページについていくつかのチュートリアルを見ました。ajaxを使用してjsonファイルを読み取る方法は？
私の参照が、このビデオです：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>
可能な複製（http://stackoverflow.com/questions/8951810/how-to-parse-json- [jqueryの/ JavaScriptでJSONデータを解析する方法？] data-with-jquery-javascript） – aldrin27
重複しているかどうかわかりませんが、とを追加したときにコンソールに何かを表示できましたHTMLファイル – gooey