Ajaxを使って問い合わせフォームを作りたい。しかし、なぜか送信までたどり着けません。

Question

前提・実現したいこと

問い合わせフォームに書き込まれた内容を、画面遷移させずに
指定のメールアドレスまで送信したいです。
そのためAjaxでサーバーまでPOST通信を飛ばす
コードを書いてみたのですが……届きません。

該当のソースコード

      <form class="contact_form">
                <table class="contact_table">
                    <tr>
                        <th>Name</th>
                        <td>
                            <input type="text" id="name" name="name" class="t_input" placeholder="お名前">
                            <span id="name_error" class="error_m"></span>
                        </td>
                    </tr>
                    <tr>
                        <th>Email</th>
                        <td>
                            <input type="text" id="email" name="email" class="t_input" placeholder="メールアドレス">
                            <span id="email_error" class="error_m"></span>
                        </td>
                    </tr>
                    <tr>
                        <th class="message">Message</th>
                        <td>
                            <textarea id="comment" id="comment_error" name="msg" placeholder="お問い合わせ内容"></textarea>
                            <span id="comment_error" class="error_m"></span>
                            <!-- <span class="error_m"></span> -->
                        </td>
                    </tr>
                </table>
                <div class="send">
                    <input type="submit" value="送信" id=" btn_submit">
                    <div class="send_arrow"></div>
                </div>
            </form>
            <!-- 結果メッセージ -->
            <div id="result"></div><!-- /#result -->

$(function(){
  
    $('.contact_form').submit(function(e) {
      //フォームの既定の動作をキャンセルする
      e.preventDefault();
      
      //フォームの入力値を変数に格納する
      var form_data = $('form').serialize();
      
      //フォームの入力内容をajaxにより送信する
      $.ajax ({
        url: 'mail.php',//送信先のURL
        type: 'POST',//POST送信
        data: form_data,//送信するデータを指定
        timeout: 60000,  //タイムアウトの設定
      }).done(function(data, textStatus, jqXHR) {
          //通信成功時の処理
          $('form')[0].reset();//フォームに入力している値をリセット
          $('#result').text(data);//send_mail.phpから返ってきたメッセージをHTMLに入れて表示する
      }).fail(function(jqXHR, textStatus, errorThrown) {
          //通信失敗時の処理
          $('#result').text('送信できませんでした');//失敗メッセージをHTMLに入れて表示する
      });
    });
  });

<?php
session_start();

//このページに直接アクセスした場合は拒否する
if(!isset($_POST['token'])) {
  echo '不正なアクセスの可能性があります';
  exit;
}

//キーとトークンが一致したら管理者に入力内容がメールで送られる
if($_SESSION['key'] === $_POST['token']) {
  $name = $_POST['name'];
  $email = $_POST['email'];
  $comment = $_POST['comment'];

  //メールの送り先
  $to = '◯◯@◯◯.com';

  //メールの件名
  $subject = '問い合わせメールが届きました';

  //メール本文
  $comment = '名前:' . $name . "\r\n\r\n" . 'メールアドレス:' . $email . "\r\n\r\n" . '内容:' . $comment;
  
  //メールヘッダー
  $header = 'From: ' . mb_encode_mimeheader($name). ' <' . $email. '>';
  
  //文字化け対策
  mb_language('ja');
  mb_internal_encoding('UTF-8');
  
  if(mb_send_mail($to, $subject, $comment, $header)) {
    echo '送信しました';
  } else {
    echo  '送信に失敗しました';
  }
} else {
  echo 'キーとトークンが一致しません';
}

補足情報

サーバーはXFREEサーバーを利用しています。

試したこと

Ajaxを使って初歩的な「問い合わせフォーム」を作成する | ゆんつてっく
https://yuntu-tek.com/ajax-contact-form/
というWebサイトを見本に作ってみたのですが、
動きませんでした。

本来であれば今回の質問内容に加えて、
①問い合わせフォーム(index.html)
②問い合わせ内容をAjaxでサーバー側に送る(main.js)
③Ajaxで送られてきた内容を受け取る(mail.php)
④問い合わせフォームの書き込みを消去し、送信の可否を表示する(index.html)
というのが理想なのですが、これは無理でしょうか？

現在は見本サイトを見習って問い合わせフォームも
PHPページにしています。

皆さんからのご回答お待ちしております！
よろしくお願いいたします。

Comments

[m.ts10806]

「届いてない」「動いてない」は何を見て判断されているのでしょうか。
非同期で実行する以上、ログ出力なり何なりするような仕組みにしておかないと確認できないと思いますが。

> というのが理想なのですが、これは無理でしょうか？
「そのように作ればできます」ということくらいなら言えますが「無理」が何の観点なのか分かりません。

[m.ts10806]

ひとまずfail()で取ってる引数を確認するところからでは。

Answer 1

変数の受け取りをしっかりしましょう。$_POST['token']で変数を受け取っているなら、Ajaxでデータ転送する際に、キーのtokenを指定する必要があります。

 $.ajax ({
        url: 'mail.php',//送信先のURL
        type: 'POST',//POST送信
        data: {token:form_data},//送信するデータを指定 ※ここにtokenを入れる
        timeout: 60000,  //タイムアウトの設定