サーバー通信用に AJAX を使用し、サーバー側スクリプトとして PHP を使用して、非常に単純なログイン フォームを作成しようとしています。出発点として、ログインデータをJSON経由でサーバーに送信しようとしていましたが、すでに問題が発生しています。
問題は、AJAX で POST 要求を使用してデータを送信すると、サーバーが何も取得していないようで、データがまったく返されないことです。リクエストの HTML は次のとおりです。
<!DOCTYPE HTML>
<html>
<head>
<title> Login experiment </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function AjaxJSON() {
$("form#loginForm").submit(function() {
var username = $('#username').val();
var password = $('#password').val();
var jsonlogin = "{\"username\" : \"" + username + "\" , \"password\" : \"" + password + "\"}";
var str = 'json=' + jsonlogin;
$.ajax({
type: 'POST',
url: 'login.php',
// URL of my PHP script
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: str,
success: function(data) {
alert("Data received!" + data);
}
});
// ajax
})
})
</script>
</head>
<body>
<h1> LOGIN: </h1>
<form id="loginForm" name="loginForm" method="post" action="">
<input type="text" id="username" name="username"> USERNAME <br>
<input type="password" id="password" name="password"> PASSWORD <br>
<input type="submit" class="button positive">
</form>
</body>
</html>
この HTML コードは、JSON 文字列でコード化されたリクエスト フォーム (ユーザー名とパスワード) を PHP スクリプトに送信するだけです。スクリプトは次のようなものです。
<?php
$result = json_decode($_POST['json']);
echo $result->username;
echo " ";
echo $result->password;
?>
返信が表示されないのはなぜですか? よろしくお願いします:)