ajax非同期通信でPHPへ一括POST、結果を受取る（備忘録） #PHP

本業ではなく、欲しいと思ったツールを時折作っているので、忘れていることが多い・・・

今回はajaxでの非同期通信
やりたいことは
　①ページ内の要素を一括してrecieve.phpへ送信
　②recieve.phpで（DB検索など）処理して結果（件数など）を返す
　③結果を表示

ajax_post.html

<html>
<head>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javaScript"><!--

function res_num(){
   var $form = $('#form1');
   var data = $form.serialize();

   //ajax通信
   $.ajax({
   type:  "post",
   url:   "recieve.php",
   data:  data ,
   success: function(res) {
      // 成功時の処理
      document.getElementById('res').value = res;
    }
  });
}

//--></script>

</head>

<body>
<form name='form1' id='form1' method='POST' action='hoge.php'>
   対象日：<input type='date' name='b_date' id='base_date' value='2021-05-13'><br>
   単　価：<input type='text' name='tanka' id='cb_tanka' value='1234'><br>
   <input type='button' onclick='res_num();' value='検索'><br>
   結　果：<input name='res' id='res' value=''>

</form></body></html>

recieve.php

<?php
$b_date = $_POST['b_date'];
$tanka  = $_POST['tanka'];
//普段のように受け取れるので、処理を書く
//例えばDB問い合わせて、結果件数を$resに入れる
echo $res;
?>

こんだけ
でも忘れちゃうのよね（T.T）