理解AJAX php脚本以进行线索游戏练习

时间:2014-05-01 19:49:35

标签: php jquery ajax

我正在尝试理解我想要运行以跟踪进度的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按钮供参考

<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);
        }
    }
});

1 个答案:

答案 0 :(得分:1)

在你的Jquery

$.ajax({
  type: "POST",
  url: "yourScriptToUpdateDB.php",
  data: { clue: "Wrong", user: "JoeBob" }
})
  .done(function( msg ) {
    // msg is any data that is echoed in the php script or output to screen is some way
    $("#clueWrongOne").hide();
  });