Ajax処理がされない原因がわかりません

前提・実現したいこと

phpを用いてクイズ形式のものを実装しようとしている途中で、クリックで反応するようにjQueryを用いてAjax処理を施したのですが、反応しません。

Ajax処理ができたかどうかalertで確認しようとしているところです。
うまくいけば値が返ってきて反応するはずなのですが。。。

解決していただけないでしょうか

発生している問題・エラーメッセージ

エラーメッセージは出ていません

<?php
//index.php

require_once('config.php');
require_once('Quiz.php');

$quiz = new Quiz();
$data = $quiz->getCurrentQuiz();
shuffle($data['a']);

?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="container">
        <h1><?= h($data['q']); ?> </h1>
        <ul>
            <?php foreach ($data['a'] as $a) :?>
            <li class="answer"><?= h($a);?></li>
            <?php endforeach ; ?>
        </ul>
        <div id="btn" class="disabled">Next Question</div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="quiz.js"></script>
</body>
</html>

//quiz.js
$(function(){
    'use strict';

    $('.answer').on('click', function(){
        var $selected = $(this);
        var answer = $selected.text();

        $.post('/_answer.php', {

        }).done(function(res) {
            alert(res.correct_answer);
            if(answer === res.correct_answer){

            } else {

            }
        });
    });
});

<?php
//_answer.php

require_once('config.php');
require_once('Quiz.php');

$quiz = new Quiz();
$correctAnswer = $quiz->checkAnswer();

header('Content-Type: application/json; charset=UTF-8');
echo json_encode([
    'correct_answer' => $correctAnswer
]);

<?php
//Quiz.php

class Quiz{
    private $_quizSet = [];

    public function __construct(){
        $this->_setup();

        if(!isset($_SESSION['current_num'])){
            $_SESSION['current_num'] = 0 ;
        }
    }
    public function checkAnswer(){
        $correctAnswer = $this->_quizSet[$_SESSION['correct_num']]['a'][0];
        return $correctAnswer;
    }

    public function getCurrentQuiz(){
        return $this->_quizSet[$_SESSION['current_num']];
    }
    private function _setup(){
        $this->_quizSet[] = [
            'q' => 'What is A?',
            'a' => ['A0','A1','A2','A3']
        ];
        $this->_quizSet[] = [
            'q' => 'What is B?',
            'a' => ['B0','B1','B2','B3']
        ];
        $this->_quizSet[] = [
            'q' => 'What is C?',
            'a' => ['C0','C1','C2','C3']
        ];
    }
}

<?php
//config.php

ini_set('display_errors', 1);

session_start();

require_once('functions.php');

<?php
//functions.php

function h($s){
    return htmlspecialchars($s, ENT_QUOTES, 'UTF-8');
}

退会済みユーザー

2020/08/30 12:35

クイズの箇所の、HTMLソース（PHPの出力処理を経て、webブラウザ上で受信したHTML）を、質問文中に加筆してもらえますか。

m.ts10806

2020/08/30 23:37

クリックできてるのかクリックしたときの想定の値はとれているのか確認してください。あと、クリックした情報をPHP側に送ってないよにうに見受けられますが、そこは問題ないのでしょうか。デバッグもう少しされたほうが良いかと思います。

mAsuo_pro

2020/09/01 08:13

HTMLソースはindex.phpの中に含まれてます。わかりずらくてすいません

mAsuo_pro

2020/09/01 08:16

クリックした情報が送られているかどうか確認するために、quiz.jsのif文の前で表示されるようにしたのですが、、、

m.ts10806

2020/09/01 09:28

でも下記のように書いてあるだけで、明示的にリクエストとして送信する記述はどこにもありません。 var answer = $selected.text();

行動規範の内容に同意します

回答1件

質問トップで提供されているコードを実行すると、<li class="answer">要素をクリックした際にアラートでnullが表示されます。

これは**_answer.php**内で呼ばれている$quiz->checkAnswer()がnullを返却しているためですが、根本的な原因は$_SESSION['correct_num']が質問トップで提供されているコードのどこにも定義されていないためです。

現状のコードだと期待動作が読み取れないので、これ以上の回答が出来そうにないですが、質問への追記・修正の依頼で指摘されているようにJavaScript側からPHP側にデータが送られていないので、その部分の実装と、データを受け取った後の処理の実装を工夫する必要があると思います。

投稿2020/09/02 10:15

退会済みユーザー

総合スコア0

mAsuo_pro

2020/09/10 11:42

quiz.jsはプラウザ側、_answer.phpはサーバー側として作りました。 answerクラスの<li>がクリックされて、quiz.jsのイベントが発生するのが一番はじめに実行されるようにしているのですが、、、自分のイメージをわかりやすいように下にまとめます。 1. liがクリックされてquiz.jsのイベントが発生する 2. _answer.phpに向けてhttpリクエストが発生する ---- ここまではクライアント === ここからはサーバ 3. _answer.phpが$correctAnswerを取得する 4. _answer.phpがquiz.jsにレスポンスを返す ===ここまではサーバ ---- ここからまたクライアント 5. quiz.jsがresとしてこのレスポンスを受け取る自分の知識が劣っているのは重々承知です。上のようになるために間違っている箇所を教えていただけたらと思います。

退会済みユーザー

2020/09/10 11:59

たとえばですが、`<li class="answer">A0</li>`という要素がクリックされた場合、_answer.phpが取得する`$correctAnswer`の値はどのようなものを想定していますか？

mAsuo_pro

2020/09/10 13:15

１）<li>がクリックされて、quiz.jsのイベントが発生する２）.postにて_answer.phpに向けてhttpリクエストが発生する３）_answer.phpにて、変数$correctAnswerはcheckAnswerメソッドにアクセスする４）Quiz.phpにて、checkAnswerメソッドはQuizクラスにあるプロパティ$_quizSetにアクセスする５）プロパティ$_quizSetは空だが、_setup()メソッドから代入される６）何番目のクイズセットが代入されるかというとcheckAnswerが[$_SESSION['current_num']]と言っているのでindex0を代入。７）checkAnswer()はindex0のキー'a'のindex0の値（A0）を取得して$correctAnswerに渡しreturnで値を返す８）_answer.phpの変数$correctAnswerにそれ（A0）が渡る９）_answer.phpがjason_encodeでquiz.jsにレスポンスを返す 10）quiz.jsにて.doneがA0を受け取る 11）それがfunctionの引数resに渡される返答が雑で申し訳ないのですが、 function _construct で$_SESSION['current_num'] = 0 と値を入れているつもりなのです。

退会済みユーザー

2020/09/11 04:08

`６）`ですが、質問本文に提示されているコードで`checkAnswer`メソッドが参照しているのは`$_SESSION['current_num']`ではなく`$_SESSION['correct_num']`になっています。その部分を修正したら期待通りの動作（上記`１）`から`１１）`の動作）になると思います。

mAsuo_pro

2020/09/12 10:24

すいません。期待通りに動きました！スペルミスで質問してしまい申し訳ないです。

行動規範の内容に同意します