Как читать json-файл с помощью ajax?

Итак, я хочу отправить страницу входа без перенаправления. И после прочтения материала об этом, я попробовал AJAX. Поэтому я просмотрел несколько руководств по странице входа с помощью ajax.Как читать json-файл с помощью 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"}

EDIT: Я попытался использовать ответ 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

Возможный дубликат [как разобрать JSON данные с помощью JQuery/JavaScript?] (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 Хотя он показывает приветствие, он по-прежнему показывает «Неверный пароль», и скрытая форма не отображается. Как я могу это исправить? – gooey

В функции успеха попробуйте использовать 'data == 'Welcome' 'вместо' console.log (data) == "Welcome" 'для условия' if' –

Как читать json-файл с помощью ajax?

ответ

Смежные вопросы