如何通过jQuery AJAX将PHP变量传入JS对象属性并实现答案验证？

问题场景 #

我做了一个答题验证功能，要求用户输入"zebra"后提示正确答案。现在通过jQuery AJAX从collectDataTesting.php拉取了正确答案到JS对象里，虽然能看到数据已经拉取成功，但测试时不管输入什么都提示"incorrect answer"，这可愁死我了！

核心问题分析 #

仔细看了你的代码，发现两个关键问题：

1. 异步请求的时序问题：AJAX请求是异步执行的，页面加载后提交按钮的点击事件就已经绑定了，但如果用户在AJAX请求还没完成（也就是正确答案还没赋值到quizes对象）的时候点击提交，此时quizes[0].bigPicture还没被正确初始化，自然会验证失败。
2. 返回字符串可能存在空白字符：虽然PHP文件里只echo了"zebra"，但有时候服务器返回的文本可能会带有首尾的空白、换行符（比如PHP文件末尾的?>之后不小心加了空格），这会导致和用户输入的纯"zebra"严格不相等。

修复方案 #

给你调整后的代码，解决这两个问题：

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) {
            // 去掉返回字符串的首尾空白，避免多余字符干扰
            var cleanAnswer = data.trim();
            quizesFunction(cleanAnswer);
            
            // 启用提交按钮
            $('.submit').prop('disabled', false);
            
            // 等数据加载完成后再绑定点击事件，避免异步时序问题
            $(document).on('click', '.submit', function() {
                AnswerSubmitted = $('#typedAnswer').val().trim(); // 同时去掉用户输入的空白
                if (AnswerSubmitted === quizes[0].bigPicture) { // 用严格相等===
                    $('.test').html('correct answer').css("color", "green");
                } else {
                    $('.test').html('incorrect answer').css("color", "red");
                }
                // 统一更新提示文本
                $('.AnswerSubmitted').html('Answer submitted is ' + AnswerSubmitted);
                $('.objectProperty').html('Object property is now ' + quizes[0].bigPicture);
            });
        },
        // 增加错误处理，方便排查请求失败的情况
        error: function() {
            $('.test').html('Failed to load correct answer').css("color", "orange");
        }
    });
});
</script>
<p class="objectProperty"></p>
<p class="AnswerSubmitted"></p>
<p class="test"></p>
<input type="text" id="typedAnswer" />
<button class="submit" id='AS' disabled>enter</button> <!-- 初始禁用按钮，等数据加载后再启用 -->

PHP文件检查

确保collectDataTesting.php里没有多余的空白字符，建议写成这样（可以省略闭合标签，避免多余输出）：

<?php echo 'zebra';

额外优化点 #

• 初始时把提交按钮设为disabled，等AJAX请求成功后再启用，从根源避免用户在数据未加载完成时点击提交。
• 对用户输入的内容也做trim()处理，避免用户不小心输入空格导致验证失败。
• 使用严格相等运算符===代替==，确保类型和值都完全匹配，避免隐式类型转换带来的意外问题。

内容的提问来源于stack exchange，提问作者Mirdon Cosh