如何从.js脚本事件触发PHP函数？

Question

I'm writing an game aplication wich runs in the web browser. So far I got pretty much everything written in PHP and HTML/CSS. My current goal is to trigger an PHP function when a certain Javascript event is being run. To be exact, when the (JS)currentTime reaches 0 in demo.js I want to set an php bool to true or directly trigger an php function from class.game.php

This is a part of my index.php file where I implement the timer element.

Hello

I'm writing an game aplication wich runs in the web browser. So far I got pretty much everything written in PHP and HTML/CSS. My current goal is to trigger an PHP function when a certain JS event is being run. To be exact, when the (JS)currentTime reaches 0 in demo.js I want to set an php bool to true or directly trigger an php function from class.game.php . Below I will show you parts of the code.

some includes:

index.php

<script type="text/javascript" src="inc/jquery.min1.js"></script>
<script type="text/javascript" src="inc/jquery.timer.js"></script>
<script type="text/javascript" src="inc/demo.js"></script>

This is a part of my index.php file where I implement the timer element.

index.php

<div id="countdown" style="float: right; margin-top: 60px; margin-right: 30px">01:00:00 </div>

    <form id="example2form" style="float: right; margin-top: 25px;">
        <input type='button' value='Play/Pause' onclick='Example2.Timer.toggle();' />
        <input type='button' value='Stop/Reset' onclick='Example2.resetCountdown();' />
        <input type='text' name='startTime' value='300' style='width:30px;' />
    </form>

this is part of demo.js

demo.js

/**
 * countdown function
 */
var Example2 = new (function() {
    var $countdown,
        $form, // Form used to change the countdown time
        incrementTime = 70,
        currentTime = 1000,
        updateTimer = function() {
            $countdown.html(formatTime(currentTime));
            if (currentTime == 0) {
                Example2.Timer.stop();
                timerComplete();
                Example2.resetCountdown();


                return;
            }
            currentTime -= incrementTime / 10;
            if (currentTime < 0) currentTime = 0;
        },
        timerComplete = function() {
            alert('Example 2: Countdown timer complete!');

        },
        init = function() {
            $countdown = $('#countdown');
            Example2.Timer = $.timer(updateTimer, incrementTime, true);
            $form = $('#example2form');
            $form.bind('submit', function() {
                Example2.resetCountdown();
                return false;
            });
        };
    this.resetCountdown = function() {
        var newTime = parseInt($form.find('input[type=text]').val()) * 100;
        if (newTime > 0) {currentTime = newTime;}
        this.Timer.stop().once();
    };
    $(init);
});

jquery.timer.js

;(function($) {
    $.timer = function(func, time, autostart) { 
        this.set = function(func, time, autostart) {
            this.init = true;
            if(typeof func == 'object') {
                var paramList = ['autostart', 'time'];
                for(var arg in paramList) {if(func[paramList[arg]] != undefined) {eval(paramList[arg] + " = func[paramList[arg]]");}};
                func = func.action;
            }
            if(typeof func == 'function') {this.action = func;}
            if(!isNaN(time)) {this.intervalTime = time;}
            if(autostart && !this.isActive) {
                this.isActive = true;
                this.setTimer();
            }
            return this;
        };
        this.once = function(time) {
            var timer = this;
            if(isNaN(time)) {time = 0;}
            window.setTimeout(function() {timer.action();}, time);
            return this;
        };
        this.play = function(reset) {
            if(!this.isActive) {
                if(reset) {this.setTimer();}
                else {this.setTimer(this.remaining);}
                this.isActive = true;
            }
            return this;
        };
        this.pause = function() {
            if(this.isActive) {
                this.isActive = false;
                this.remaining -= new Date() - this.last;
                this.clearTimer();
            }
            return this;
        };
        this.stop = function() {
            this.isActive = false;
            this.remaining = this.intervalTime;
            this.clearTimer();
            return this;
        };
        this.toggle = function(reset) {
            if(this.isActive) {this.pause();}
            else if(reset) {this.play(true);}
            else {this.play();}
            return this;
        };
        this.reset = function() {
            this.isActive = false;
            this.play(true);
            return this;
        };
        this.clearTimer = function() {
            window.clearTimeout(this.timeoutObject);
        };
        this.setTimer = function(time) {
            var timer = this;
            if(typeof this.action != 'function') {return;}
            if(isNaN(time)) {time = this.intervalTime;}
            this.remaining = time;
            this.last = new Date();
            this.clearTimer();
            this.timeoutObject = window.setTimeout(function() {timer.go();}, time);
        };
        this.go = function() {
            if(this.isActive) {
                this.action();
                this.setTimer();
            }
        };

        if(this.init) {
            return new $.timer(func, time, autostart);
        } else {
            this.set(func, time, autostart);
            return this;
        }
    };
})(jQuery);

part of class.game.php

/**
    * Purpose: end the game
    * Preconditions: turns on the game over flag
    * Postconditions: game over flag is true
    **/
    function end()
    {
        $this->over = true;
    }

/**
    * Purpose: return bool to indiciate whether or not the game is over
    * Preconditions: none
    * Postconditions: returns true or flase
    **/
    function isOver()
        {
            if ($this->won)
                return true;

            if ($this->over)
                return true;

            if ($this->health < 0) 
                return true;

            return false;
        }

when

timerComplete();

is triggered in demo.js I want to trigger function

end()

in class.game.php, how do I accomplish this?

Answer 1

Here is a quick AJAX example.

demo.js

timerComplete = function() {
    alert('Example 2: Countdown timer complete!');
    sendAjax();
}

function sendAjax()
{
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      if(xmlhttp.responseText.match("success")){
          alert("AJAX returns success");
      }else{
          // something bad heppened
      }
    }
  }
  xmlhttp.open("GET","class.game.php?isTimerComplete=1",true);
  xmlhttp.send();
}    

class.game.php

if(isset($_GET["isTimerComplete"])==true)
{
    // Do additional sanitizations here,
    // e.g. http://www.w3schools.com/php/php_form_validation.asp
    $isTimerComplete=$_GET["isTimerComplete"];
    if($isTimerComplete){
        echo "success";
        yourFunction(); // function that set an php bool to true
    }
}

---

Please go to sites like AJAX Tutorial .

Or google something like "Ajax php example" to learn more about AJAX and how it interact with php files.

Answer 2

just to complement @user2875289's answer, if you have jquery already on your web page why dont you use it, just do this in javascript:

timerComplete = function() {
    alert('Example 2: Countdown timer complete!');
    callPHPMethod("class.game.php?isTimerComplete=1", function(returnedPHPfunctionValue){
         // it was success, now you can do something with returnedPHPfunctionValue
    });
}

function callPHPMethod(method, callback)
{
  $.ajax({
        url: method,
        method: "GET",
        success: function(data){
              if($.isFunction(callback)) callback(data)
        },
        error: function(){
              //do something with error
        }
  });

in your PHP, do as @user2875289 pointed:

if(isset($_SESSION["isTimerComplete"]) != true)
{
    // Do additional sanitizations here
    $isTimerComplete=$_GET["isTimerComplete"];
    //
    if($isTimerComplete){
        echo "success";
        yourPHPFunction(); // function that set an php bool to true
    }
}