HOWTO · jQuery
jQuery AJAX データ
このチュートリアルでは、jQuery AJAX でデータを使用する方法を示します。
このページの内容
AJAX データは、サーバーに送信され、サーバーによって使用されるデータです。このチュートリアルでは、jQuery で AJAX を使用してサーバーにデータを送信する方法を示します。
jQuery AJAX データ
AJAX を使用してサーバーに送信されるデータは、JSON オブジェクト、文字列、または配列にすることができます。このデータは、サーバーページでさらにあらゆる目的に使用されます。
配列または JSON オブジェクトを使用して、単一または複数のデータを送信できます。以下の構文を使用して、配列とともに複数のデータフィールドを送信します。
data: {username: username, password: password}
このメソッドは、複数のデータフィールドをサーバーに送信でき、それらを以降のプロセスに使用できます。この場合、シリアル化された JSON オブジェクトですべてのデータフィールドを送信できる JSON オブジェクトの方が便利です。
JSON オブジェクトを使用して複数のデータフィールドを送信する例を試してみましょう。例を参照してください：
index.html：
<!doctype html>
<html>
<head>
<title>jQuery Ajax Data</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
<form id="Login_Form" method="post">
<div>
Enter the Username:
<input type="text" name="username" id="User_Name" />
Enter the Password:
<input type="password" name="password" id="Password" />
<input type="submit" name="loginBtn" id="Login_Button" value="Login" />
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#Login_Form').submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: 'demo.php',
data: $(this).serialize(),
success: function(response) {
var JSON_Data = JSON.parse(response);
// user login check
if (JSON_Data.success == "1" && JSON_Data.username == "admin" && JSON_Data.password == "password" )
{
document.write('Login Success');
alert(response);
}
else
{
alert('Invalid User Name and Password!');
}
}
});
});
});
</script>
</body>
</html>
上記のコードは、$.ajax および post メソッドを使用してフォームデータをサーバーに送信し、サーバーはログイン目的でデータを使用します。データは、data: $(this).serialize(), 構文を使用してシリアル化されたオブジェクトで送信されます。これが demo.php サーバーページです。
<?php
if (isset($_POST['username']) && $_POST['username'] && isset($_POST['password']) && $_POST['password']) {
//Here we can also perform authentication
echo json_encode(array('success' => 1, 'username' => $_POST['username'], 'password' => $_POST['password'] ));
} else {
echo json_encode(array('success' => 0));
}
?>
サーバーコードは、ユーザー名とパスワードが設定されているかどうかを確認し、AJAX に送り返す JSON オブジェクトを作成します。index.html ページの jQuery でログインを認証しました。
以下のアニメーションのコードの出力を参照してください。
