サンプルは下記ページの内容をほとんどそのまま書かせてもらった。
サンプルコード
htmlとjQueryの記述。
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JS Practice</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form id="form_1" method="post">
<p>名前<input type="text" name="userid" id ="userid"></p>
<p>パスワード<input type="text" name="passward" id="passward"></p>
</form>
<button id="ajax">送信</button>
<div class="result"></div>
<script>
$(function() {
$('#ajax').on('click', function() {
// Ajax通信を開始
$.ajax({
url: './request.php',
type: 'POST',
data: {
'userid':$('#userid').val(),
'passward':$('#passward').val()
},
dataType: 'html',// POST先から受信するデータタイプ
})
// Ajaxが成功した時
.done((data) => {
$('.result').html(data);
console.log(data);
})
// Ajaxが失敗した時
.fail((data) => {
$('.result').html(data);
console.log(data);
})
// Ajaxが成功した時と失敗した時
.always((data) => {
});
});
});
</script>
</body>
</html>
PHPの記述
<?php
header('Content-type: text/plain; charset=UTF-8');
if (isset($_POST['userid']) && isset($_POST['passward'])) {
$id = $_POST['userid'];
$pass = $_POST['passward'];
$str = "SUCCESS\nuserid:".$id."\npassward:".$pass."\n";
$result = nl2br($str);
echo $result;// フロントに値を返す
} else {
echo "FAIL";
}
その他参考
先述のリンク先でも紹介されていたページ。
ajax処理で取得したデータの内容についても言及されていて勉強になったページ。