【備忘録】非同期通信（Ajax）

前置き

ポートフォリオに非同期通信の実装をした時の流れ PHPは作成済みとする。

非同期通信を分かりやすく言うとページ移動をせずにページ更新を行うこと。

全体的な流れ

1.更新したときに表示させたいtころに＜div＞を作る。idもつける 2.＜/body＞直上に＜script＞の追加 3.＜script＞で送られた情報をPHPにて操作する

2.＜/body＞直上に＜script＞の追加

  <script>
    $(function() {

      // ボタンがクリックされた時の処理
      $("[type=submit]").on('click', function() {
        $.ajax({
          // 送信方法
          type: "POST",
          // 送信先ファイル名（この場合だとpost.php）
          url: "post.php",
          // 受け取りデータの種類
          datatype: "json",
          // 送信データ
          data: {
            // POSTに送る情報をいい感じに（IDをつけておく）
            "id": $('#id').val(),
            "message": $('#message').val(),
          },

          // 通信が成功した時
          success: function(data) {
            console.log("通信成功");

          //通信成功した時の操作
            $("#mein").prepend('<div id="ajax" class="item"></div>');
            $("#ajax").prepend('<div id="item-left" class="item-left pt-3"></div>');
            $("#ajax").append('<div id="item-right" class="item-right m-lg-3"></div>');
            $("#item-left").append('<img src="member_picture/<?php print(htmlspecialchars($member['picture'], ENT_QUOTES)); ?>" alt="<?php print(htmlspecialchars($member['name'], ENT_QUOTES)); ?>">');

            $("#item-right").append('<p><?php print(htmlspecialchars($member['name'], ENT_QUOTES)); ?></p><p>' + data.message + ' </p> <a><p style="background-color: #0D6EFD;color: #fff;border-radius: 3px;padding: 5px;" >新規投稿しました！</p>');
            $('textarea').val(""); 
            console.log(data)
          } 
        });
      });
    });
  </script>

通信が成功した時の操作より前はID以外ほぼテンプレ 注目すべきはここ

 $("#item-right").append('<p><?php print(htmlspecialchars($member['name'], ENT_QUOTES)); ?></p><p>' + data.message + ' </p> <a><p style="background-color: #0D6EFD;color: #fff;border-radius: 3px;padding: 5px;" >新規投稿しました！</p>');

+ date.message+ とすることで打ち込んだメッセージをすぐに表示できている

成功した時の操作はこちらを参考にしました。
分かりやすかったです。
jQueryを利用したDOM操作 要素の追加メソッドまとめ

3.＜script＞で送られた情報をPHPにて操作する

さあここよな～

post.php

<?php
//お決まり
session_start();
require('dbconnect.php');

//まずは
$id = $_POST['id'];
$message = $_POST['message'];
$reply = $_POST['reply'];

//POSTの値をDBにINSRT
if (!empty($_POST)) {
  if ($_POST['message'] !== '') {
    $message = $db->prepare('INSERT INTO messages SET member_id=?, message=?, reply=?,created=NOW()');
    $message->execute(array(
$_POST['id'],
   $_POST['message'],
   $_POST['reply']
    ));

//ここはテンプレ
    header('Content-Type: application/json; charset=utf-8',);
//ここはね～多分結び付けかな？
//ここの＄idとscriptのidは一緒に！みたいな？？
    echo json_encode(['id' => $id, 'message' => $_POST['message']);
} else {header('Content-Type: application/json; charset=utf-8',);}} 
?>

正直最後の一文はあいまいな理解です。 これをポートフォリオに実装することで、Javascriptへの理解が深まった（少しだけ）