如何使用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文件？

回答

相关问题