了解AJAX php脚本的线索游戏练习

我正在尝试理解我想运行的PHP脚本之间的关系，以跟踪进度和已经发生的前端工作。在游戏练习中有2条线索。一旦输入正确的线索，一切都发生如下所示，我想添加一个脚本发送到MYSQL。

我现在正在写脚本，但我正在努力弄清楚我应该在什么时候引入这个。我的PHP中是否需要任何东西来将其区分为AJAX ?在后台运行吗?我只是"包含"它作为另一个更大的PHP脚本的一部分吗?

脚本在我的脑海中将发送1，如果正确或0，如果仍然错误。这样我就可以很容易地判断，而不必处理线索。这些线索与我的想法无关，但你对此有何看法?

// =====clue 1====================////////////////// clue 1 **************
//**********************************========================
$(document).on('click', '.btn-clue', function(){ 
    if($i!=1){
       $.ajax({
                  type: "POST",
                  url: "includes/post_clue_progress",
                  data: { clueTwo: "1", usernameClue: "<?php echo $manager; ?>" }
                })
              .done(function( msg ) {
                // msg is any data that is echoed in the php script or output to screen is some way
                $("#clueWrongTwo").hide();
                $("#mySecondDivClueTwo").remove();
                $("#clueTwo").remove();
                $("#clue2Input").remove();
                $two.show();
                $("#clueTwoInputCorrect").slideDown('slow').show();
                $i++;
              });   
        } else {
            $("#mySecondDiv").remove();
            var mySecondDiv = $('<div id="mySecondDiv"><img src="images/check-x-mark.png" /></div>').show('slow');
            $('#clueWrongOne').append(mySecondDiv);
        }
    }
});
// =====clue 2====================////////////////// clue 2*********=========
$(document).on('click', '.btn-clueTwo', function(){ 
    if($i!=1){
        //checking if textbox has desired value (1 in this case),
        //in your application you would be passing the textbox value to 
        //ajax here and making the check at server side
        var $two = $('#twoClueShow');
        var x = $("#clueTwoInput").find('input[type=text]').val();
        if(x == 'C' || x == 'CS') {
            // if answer correct you should load data from ajax 
                    // and append it to a container
            $("#clueWrongTwo").hide();
            $("#mySecondDivClueTwo").remove();
            $("#clueTwo").remove();
            $("#clue2Input").remove();
            $two.show();
            $("#clueTwoInputCorrect").slideDown('slow').show();
            $i++;
        } else {
        $("#mySecondDivClueTwo").remove();
        var mySecondDivClueTwo = $('<div id="mySecondDivClueTwo"><img src="images/check-x-mark.png" /></div>') .show('slow');
            $('#clueWrongTwo').append(mySecondDivClueTwo);
        }
    }
});

以上是我所能得到的。这就是我困惑的地方。我现在想要通过AJAX向数据库发送正确的答案，对吧?我会把我的php脚本包含在注释区吗?

我正在考虑创建一个脚本，填充1，如果正确和0，如果不正确，使生活更容易。让它完成工作，因为我不需要重新引入输入或重复使用。这样，一旦页面重新加载，我就可以不再输出输入，并使用这些信息来确定显示的内容以及它们在线索游戏中的位置。基本上是保存进度。

在构建我的正常PHP时是否有特定的东西要使用?我想，在哪里"包括"它是我困惑的地方。

MY button for reference

<div id="clueOneInput">
    <input type="text" id="clue1" class="clue-text form-control" placeholder="Enter Clue 1 here and check"/>
</div>
<input type="button" id="clue1Input"class="btn btn-primary btn-clue" value="Check">

更新:

// =====clue 1====================////////////////// clue 1**********************************************************************========================
$(document).on('click', '.btn-clue', function(){ 
    if($i!=1){
        //checking if textbox has desired value (1 in this case),
        //in your application you would be passing the textbox value to ajax here and making the check at server side
        var $one = $('#oneClueShow');
        var x = $("#clueOneInput").find('input[type=text]').val();
        if(x == 'd' || x == 'dr')
        {
            //if answer correct you should load data from ajax and append it to a container
            $.ajax({
                      type: "POST",
                      url: "includes/post_clue_progress",
                      data: { clueOne: "1", usernameClue: "<?php echo $manager; ?>" }
                    })
                  .done(function( msg ) {
                    // msg is any data that is echoed in the php script or output to screen is some way
                    $("#clueWrongOne").hide();
                    $("#mySecondDiv").remove();
                    $("#clueOne").remove();
                    $("#clue1Input").remove();
                    $one.show();
                    $("#clueOneInputCorrect").slideDown('slow').show();
                    $i++;
                  });
        }
        else
        {
            $("#mySecondDiv").remove();
            var mySecondDiv = $('<div id="mySecondDiv"><img src="images/check-x-mark.png" /></div>').show('slow');
            $('#clueWrongOne').append(mySecondDiv);
        }
    }
});
// =====clue 2====================////////////////// clue 2**********************************************************************========================
$(document).on('click', '.btn-clueTwo', function(){ 
    if($i!=1){
        var $two = $('#twoClueShow');
        var x = $("#clueTwoInput").find('input[type=text]').val();
        if(x == 'CS' || x == 'CSU')
        {
            $.ajax({
                      type: "POST",
                      url: "includes/post_clue_progress",
                      data: { clueTwo: "1", usernameClue: "<?php echo $manager; ?>" }
                    })
                  .done(function( msg ) {
                    // msg is any data that is echoed in the php script or output to screen is some way
                    $("#clueWrongTwo").hide();
                    $("#mySecondDivClueTwo").remove();
                    $("#clueTwo").remove();
                    $("#clue2Input").remove();
                    $two.show();
                    $("#clueTwoInputCorrect").slideDown('slow').show();
                    $i++;
                  });   
        }
        else
        {
            $("#mySecondDivClueTwo").remove();
            var mySecondDivClueTwo=$('<div id="mySecondDivClueTwo"><img src="images/check-x-mark.png" /></div>').show('slow');
            $('#clueWrongTwo').append(mySecondDivClueTwo);
        }
    }
});