如何使用ajax讀取json文件？

好，所以我想提交一個登錄頁面而不用重定向。在閱讀了關於這個的東西之後，我嘗試了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>

來源

2016-04-26 gooey

的可能的複製[如何解析與jQuery/JavaScript的JSON數據？]（http://stackoverflow.com/questions/8951810/how-to-parse-json- data-with-jquery-javascript） – aldrin27

我不知道它是否有重複，但當我在我的控制檯上添加和時，我能夠在控制檯上顯示某些內容HTML文件 – gooey

這可能是你使用的是此錯誤的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/

來源

2016-04-26 04:00:52

非常感謝。我感謝您的幫助。我只想問一個關於我的第一個問題的問題。參見上面編輯的部分。 – gooey

下面是我的屏幕截圖：http://imgur.com/CT7T6gp 01雖然它顯示歡迎，它仍然顯示「密碼不正確」，並且不顯示隱藏的窗體。我怎樣才能解決這個問題？ – gooey

在成功函數中，嘗試使用'data =='Welcome''而不是'console.log（data）==「Welcome''作爲'if'條件 –

如何使用ajax讀取json文件？

回答

相關問題