最近フロント側とバックエンド側との連携を作る時に、使っていた方法をメモしておく。関数が多いが、一つのファイルにまとめたい場合、使おうかな。
まずフロント側で、送信用form
を用意する(ログインを例とする)
<?php
<form id="id-name" method="POST">
//...
</form>
?>
ajax
でデータを送受信する
$(document).ready(function(){
$("#id-name").submit(function(event){
event.preventDefault(); // フォームの通常送信を防ぐ
let id = $("#id").val();
let password = $("#password").val();
$.ajax({
url: "/function.php",
type: "POST",
data: { id: id, password: password ,action: "login"},//ここでactionを追加で送る
dataType: "json",
success: function(response) {
if (response.success) {
window.location.href = "pages.php"; //成功時リダイレクト
} else {
$("#error").text(response.message); //エラー表示
}
},
error: function(xhr, status, error) {
console.log("AJAXエラー: ", xhr, status, error);
$("#error").text("通信エラーが発生しました");
}
});
});
});
送られてきたaction
はlogin
であれば、ログインの関数を実行する
<?php
function login(){
//...
}
if (isset($_POST['action'])) {
$action = $_POST['action'];
switch ($action) {
//actionがloginであれば実行する
case 'login':
login();
break;
case 'others':
others();
break;
default:
echo json_encode(["success" => false, "message" => "無効なアクション"]);
break;
}
} else {
echo json_encode(["success" => false, "message" => "アクションが指定されていません"]);
}