Question

我希望用户在输入区域中输入答案（“斑马”）。如果他们得到正确的提示，则会提醒他们正确。

此答案最终将从数据库中提取。对于这个简单的示例，我只是通过jQuery AJAX将其从另一个php文件中拉入对象。

似乎可以将php变量拉进去，但是在我在这里所做的示例中它仍然显示“不正确的答案” =

https://michael-r-oneill.ie/development/random/Testing/testing.php

https://michael-r-oneill.ie/development/random/Testing/collectDataTesting.php

下面是html / php文件

    <!-- head -->

<head>
    <!-- jQuery library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js">
    </script>

    <title>Testing</title>

</head>

<script>

var AnswerSubmitted;
var quizes;

function quizesFunction(animal) 
{quizes = [{bigPicture: animal},{bigPicture: 'tokyo'}]}

$(function() {

    $.ajax({type: "POST",
            url: 'collectDataTesting.php',
            data: {},
            dataType: "text",
            success: function(data) {


                quizesFunction(data);


            }
            });



    $(document).on('click', '.submit', function() {

    AnswerSubmitted = $('#typedAnswer').val();

    if (AnswerSubmitted == quizes[0].bigPicture) 
    {
        $('.test').html('correct answer').css("color", "green");;
        $('.AnswerSubmitted')
            .html('Answer submitted is ' + AnswerSubmitted);
        $('.objectProperty')
            .html('Object property is now ' + quizes[0].bigPicture);
    }
    else 
    {
        $('.test').html('incorrect answer').css("color", "red");
        $('.AnswerSubmitted')
            .html('Answer submitted is ' + AnswerSubmitted);
        $('.objectProperty')
            .html('Object property is now ' + quizes[0].bigPicture);

    }
    });

});

</script>


<p class="objectProperty"></p>
<p class="AnswerSubmitted"></p>
<p class="test"></p>
<input type="text" id="typedAnswer" />
<button class="submit" id='AS'>enter</button>

下面是我要收集数据的“ collectDataTesting.php” php文件

<?php   
    echo 'zebra';
?>

Answer 1

如果我没看错，那么看起来像data传递给quizesFunction(data)时，ajax请求已完成不是您期望的类型。< / p>

请记住，如果您没有为$ .ajax提供dataType设置（您没有提供），jQuery将尝试为您“猜测”类型（https://api.jquery.com/jQuery.ajax/）。 / p>

您可以将dataType设置为text，也可以简单地遵循其他成员的建议，并让PHP返回JSON（jQuery将作为JavaScript对象插入其中）。

Answer 2

因此，根据上述贡献者的建议，我设法通过使用JSON回复AJAX来开始解决此问题。

这是更新的测试页=

https://michael-r-oneill.ie/development/random/Testing/testing3.php

https://michael-r-oneill.ie/development/random/Testing/collectDataTesting3.php

和下面的代码=

html =

<p class="AnswerSubmitted"></p>
<p>Type 'dog' in the input area and hit enter</p>
<input type="text" id="typedAnswer" />
<button class="submit" id='AS'>Enter</button>

js =

var AnswerSubmitted;
var AnswerCollected;
var quizes = [{bigPictureAnsw: 'answer here', bigPHint : 'hint here'},
              {bigPictureAnsw: 'answer here', bigPHint : 'hint here'}]


$(function() {

    $.ajax({ 
        type: 'GET', 
        url: 'collectDataTesting3.php', 
        data: { get_param: 'value' }, 
        dataType: 'json',
        success: function (data) { 


            var x = 0;
            $.each(data, function(index, element) {

            quizes[x].bigPicture = element.answer;
            quizes[x].bigPHint = element.hint;
            x++;



            });
        }
    });

    $(document).on('click', '.submit', function() {

         AnswerSubmitted = $('#typedAnswer').val();

         if (AnswerSubmitted == quizes[0].bigPicture)
         {
          $('.AnswerSubmitted').html('correct answer'); 
         }
         else
         {
          $('.AnswerSubmitted').html('not correct');
         }

    });


});

外部页面（'collectDataTesting3'）=

[ { "answer" : "dog", "hint" : "not a cat" },
  { "answer" : "dublin", "hint" : "capital city" }]

如何通过jQuery AJAX将php变量拉入js对象的属性中？

2 个答案: