javascript - Ajax で呼び出して応答を取得する方法

Question

インターネットソフトウェア開発クラス用に自分の Web サイトを作成しています。私はウェブコーディングが初めてです。Java や他のいくつかの言語には精通していますが、HTML を除いて、Web サイトの設計は初めてです。2 週間前に PHP と Javascript を使い始めましたが、これまでに多くのことを習得できました。とにかく、私は自分のデザインで障害にぶつかりました。

最初に私のサイトを説明させてください。雑学サイトやってます。ユーザーがログインすると、SQL クエリによってユーザーがまだ回答していない質問が表示され、画面の左側に 4 つの回答候補が表示されます。ユーザーが「送信」回答ボタンをクリックすると、次の 2 つのことが起こります。1) 画面の左側に新しい質問が表示され、2) 前の質問の結果 (「正解」または「」)不正解です。正解は...」) が画面の右側に表示されます。

残念ながら、これを行う方法がわかりません。新しい質問を表示することはできますが、結果を表示することはできません。これまでにこの Web ページに少なくとも 12 時間費やしましたが、完全に立ち往生しています。私はかなりの時間を Google に費やしてきました。Ajax を使用する必要があると思いますが、Ajax に慣れていないため、Ajax を利用しようとする試みはすべて惨めに失敗しました。何かお役に立てば幸いです。

ここに私の雑学ページのコードがあります:

    <?php
ob_start();
include_once 'functions.php';
include 'header.php';


//Trivia category
$category = 1;

$user = $_SESSION['user'];

getNewQuestion($user, $category);



$postValue = $_POST['value'];



echo <<<_END

 <html lang="en">
 <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta charset="utf-8">

        <title>Trivia</title>

        <!-- Add bootstrap -->
        <link href="bootstrap-3.0.0/dist/css/bootstrap.css" rel="stylesheet">

        <!-- Import jumbotron -->
        <link rel="bootstrap-3.0.0/examples/jumbotron/jumbotron.css" rel="stylesheet">

        <!-- Import custom CSS -->
        <link href="custom.css" rel="stylesheet">

_END;
?>
        <script>
        function reportError()
        {
        alert("Report question error option not yet available.");
        }
        </script>

        <script>
        function returnAnswer()
        {

            if ($postValue == $optionValue)
            {
            queryMysql("INSERT INTO membersAnswers (user, category_id, question_id, score)
                VALUES ('$user', '$category', '$newQuestion[question_id]', '1')");

            document.getElementById('result').innerHTML=='Correct!';
            $msg = 'Correct!';
            alert($msg);
            }

            else
            {
            queryMysql("INSERT INTO membersAnswers (category_id, question_id, score)
                VALUES ('$category', '$newQuestion[question_id]', '0')");
            document.getElementById('result').innerHTML=='Incorrect. Correct Answer: $correctAnswer.';
            $msg = 'Incorrect. Correct Answer: $correctAnswer.';
            alert($msg);
            }
            }


        </script>
<?php
echo <<<_END
 </head>

 <body>

 <div class="container"  STYLE="background-color:white;">
    <!-- Serves as wrapper for page content. -->

        <!-- Create title header at top of page -->
        <div class="jumbotron">
        <h1>Play</h1>  <!-- Header -->
        <h2>Test your knowledge against your friends and earn achievements!</h2>
        <p>This site is still in development.</p>
        </div>
  </div><!-- .container -->


<div class="container" STYLE="background-color:white;">
<div class="row">

<!------extra space on left--------------------------------------------------------------------------->
<div class="col-md-1"></div>

<!------question box ------------------------------------------------------------------------------------>
<div class="col-md-5" style="border: 2px solid black">
    <form class="form" id="form" method="post">

        <h3 class="questions" id="id">$question</h3>
        <br/>

    <div class="radio"   style="font-size: 20px;">

        <input type="radio" value="option1" name="option" id="1">$answer1<br/>

        <input type="radio" value="option2" name="option" id="2">$answer2<br/>

        <input type="radio" value="option3" name="option" id="3">$answer3<br/>

        <input type="radio" value="option4" name="option" id="4">$answer4<br/>

        <input type="radio" checked='checked' style='display:none' value="5" id="optionsRadios">
        <br/>


    </div>


<br/>
<button type="button" name="submitBtn" class="btn btn-primary" onclick="returnAnswer()">Submit Answer</button>
<br/><p>  </p>

<button type="button" name="errorBtn" class="btn btn-primary" onclick="reportError()">Report an error</button>
<br/><p>  </p>

<button type="submit" name="nextBtn" class="btn btn-primary" action="trivia.php">Next Question</button>
<br/><p>  </p>
</form>

</div> <!--End div class col-md-5 -->

<!------extra space in middle------------------------------------------------------------------------>
<div class="col-md-1"></div>

<!------answer box----------------------------------------------------------------------------------->
<div class="col-md-3" style="border: 2px solid black">
<h3>Previous Question:</h3>
<p id="result">$msg</p>
<p>  </p>
<button type="button" name="errorBtn" class="btn btn-primary" onclick="reportError()">Report an error</button>
<br/><p>  </p>
</div> <!--End div class col-md-3 -->

<!------extra space on right--------------------------------------------------------------------------->
<div class="col-md-1"></div>

_END;
?>


</div> <!--End div class row -->
<p></p> <!-- Add extra space below question border -->
</div> <!--End div class container -->



<!-- Import to use navbar -->
<script src="bootstrap-3.0.0/assets/js/jquery.js"></script>

<!-- Import to use dropdown list
<script src="bootstrap-3.0.0/js/dropdown.js"></script> -->

<!-- Import so that menu becomes mobile menu on smaller screens -->
<script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>

 </body>
</html>

上記のスクリプトで呼び出された「getQuestion」関数を含む functions.php コードの一部を次に示します。

    <?php
$dbhost = 
$dbuser = 
$dbpass = 
$dbname = 

mysql_connect($dbhost, $dbuser, $dbpass) or die(mysql_error());
mysql_select_db($dbname) or die(mysql_error());




function getNewQuestion ($user, $category)
{
    global $question;
    global $answer1;
    global $answer2;
    global $answer3;
    global $answer4;
    global $optionValue;
    global $question_id;

    $query = queryMysql("SELECT * FROM questions
                        LEFT JOIN membersAnswers
                        ON membersAnswers.user = '$user' AND questions.question_id = membersAnswers.question_id
                        WHERE membersAnswers.question_id IS NULL AND questions.category_id = '$category'
                        ORDER BY RAND()
                        LIMIT 1;");

if (mysql_num_rows($selectQuestion))
    {

    $newQuestion = mysql_fetch_array ( $query );
    $question = $newQuestion['question_name'];
    $answer1 = $newQuestion['answer1'];
    $answer2 = $newQuestion['answer2'];
    $answer3 = $newQuestion['answer3'];
    $answer4 = $newQuestion['answer4'];
    $question_id = $newQuestion['question_id'];

    if ($newQuestion['answer'] = '1')
    {
    $correctAnswer = $newQuestion['answer1'];
    $optionValue = "option1";
    }
    elseif ($newQuestion['answer'] = '2')
    {
    $correctAnswer = $newQuestion['answer2'];
    $optionValue = "option2";
    }
    elseif ($newQuestion['answer'] = '3')
    {
    $correctAnswer = $newQuestion['answer3'];
    $optionValue = "option3";
    }
    elseif ($newQuestion['answer'] = '4')
    {
    $correctAnswer = $newQuestion['answer4'];
    $optionValue = "option4";
    }

    return $question;
    return $answer1;
    return $answer2;
    return $answer3;
    return $answer4;
    return $optionValue;
    return $question_id;

}

else {
    echo "There are no more questions at the moment.";
    }
}
?>

この情報が必要かどうかはわかりませんが、関連する 2 つのテーブルのフィールドは次のとおりです。

質問 (question_id、question_name、answer1、answer2、answer3、answer4、answer [1、2、3、または 4 と書かれた正解]、category_id)

membersAnswers(ユーザー、category_id、question_id、score)

探しているものを見つけようとこのサイトを検索しましたが、何も見つかりませんでした。ここの誰かが私を助けてくれることを本当に願っています。前もって感謝します。

編集：ほぼ最適に機能するコードを追加しました。一番参考になるかなと思いました。残念ながら、Ajax を使用した私の試みは含まれていません。

Ajax を動作させるために trivia.php ページに追加したものを次に示します。これはヘッダーに追加されました。

        <script type="text/javascript">
    function correctOrNot(){
        $.ajax({
            type: "POST",
            url: "getResult.php",
            data:   "answer1=" + document.getElementById("answer1").value +
                    "&answer2=" + document.getElementById("answer2").value +
                    "&answer3=" + document.getElementById("answer3").value +
                    "&answer4=" + document.getElementById("answer4").value +
                    "&optionValue=" + document.getElementById("optionValue").value +
                    "&postOption=" + $_POST['option'] +
                    "&user=" + $_SESSION['user'] +
                    "&category=" + '1' +
                    "&question_id=" + document.getElementById("question_id").value,
            dataType: "text",
            success: function(html){
                $("#result").html(html);
            }
        });
        }
</script>

getResult.php コードは次のとおりです。

    <?php
include_once 'functions.php';

if ($postOption == $optionValue)
{


queryMysql("INSERT INTO membersAnswers (user, category_id, question_id, score)
    VALUES ('$user', '$category', '$question_id', '1')");

echo 'Correct!';
}

else
{
queryMysql("INSERT INTO membersAnswers (user, category_id, question_id, score)
    VALUES ('$user', '$category', '$question_id', '0')");

echo 'Incorrect. Correct Answer: $correctAnswer.';
}

?>

score 0 · Accepted Answer

あなたが説明していることを行うのにAJAXは必要ありません。複雑さが増すだけなので、省略します。

まず最初に、でグローバル変数を定義する代わりに、配列getNewQuestion()を返し、のようなことを行うと、のようなさまざまなプロパティにアクセスできます。実際、returnの使用には欠陥があり、最初の呼び出しの後、他の呼び出しは実行されません。変数にアクセスできる唯一の理由は、変数をグローバルにしたことです。$questionDetails = getNewQuestion();$questionDetails['question']return

送信時のアクションを見ると、要素に PHP を配置したときに問題が発生します<script>。PHP はサーバー上で実行されるため、これを行うことはできません。すべての PHP が実行された後、ファイルは Web ブラウザーに読み込まれます。その後、すべての JavaScript がブラウザ (クライアント側) で実行されます。

これを行う一般的な方法は、アクションを別の PHP ファイルに設定することです。これでデータが送信され、フォーム入力を解析できます (通常は$_POST経由)。したがって、そのすべてのデータを読み取り、おそらく別の DB クエリを実行して、質問 ID に基づいて正しい回答を取得し、それが正しいか間違っているかを判断してから、新しい質問と前の回答をレンダリングします。

多くの場合、人々はこれをすべて 1 つの PHP ファイルで行います。ファイルの先頭には、フォーム送信かどうかを確認するためのチェックが含まれています (例: のようなもの if (!empty($_POST)) { . . . })。提出の場合は、チェックの回答を実行します。いずれの場合も、新しい質問を表示し、それが提出物である場合は、それらが正しいか間違っているかを示すこともできます.

javascript - Ajax で呼び出して応答を取得する方法

1 に答える 1

Related

Reference