How to Call PHP Functions by JavaScript

How can I call PHP functions by JavaScript?

Yes, you can do ajax request to server with your data in request parameters, like this (very simple):

Note that the following code uses jQuery

jQuery.ajax({
    type: "POST",
    url: 'your_functions_address.php',
    dataType: 'json',
    data: {functionname: 'add', arguments: [1, 2]},

    success: function (obj, textstatus) {
                  if( !('error' in obj) ) {
                      yourVariable = obj.result;
                  }
                  else {
                      console.log(obj.error);
                  }
            }
});

and your_functions_address.php like this:

    <?php
    header('Content-Type: application/json');

    $aResult = array();

    if( !isset($_POST['functionname']) ) { $aResult['error'] = 'No function name!'; }

    if( !isset($_POST['arguments']) ) { $aResult['error'] = 'No function arguments!'; }

    if( !isset($aResult['error']) ) {

        switch($_POST['functionname']) {
            case 'add':
               if( !is_array($_POST['arguments']) || (count($_POST['arguments']) < 2) ) {
                   $aResult['error'] = 'Error in arguments!';
               }
               else {
                   $aResult['result'] = add(floatval($_POST['arguments'][0]), floatval($_POST['arguments'][1]));
               }
               break;

            default:
               $aResult['error'] = 'Not found function '.$_POST['functionname'].'!';
               break;
        }

    }

    echo json_encode($aResult);

?>

Call php function from JavaScript

This is, in essence, what AJAX is for. Your page loads, and you add an event to an element. When the user causes the event to be triggered, say by clicking something, your Javascript uses the XMLHttpRequest object to send a request to a server.

After the server responds (presumably with output), another Javascript function/event gives you a place to work with that output, including simply sticking it into the page like any other piece of HTML.

You can do it "by hand" with plain Javascript , or you can use jQuery. Depending on the size of your project and particular situation, it may be more simple to just use plain Javascript .

Plain Javascript

In this very basic example, we send a request to myAjax.php when the user clicks a link. The server will generate some content, in this case "hello world!". We will put into the HTML element with the id output.

The javascript

// handles the click event for link 1, sends the query
function getOutput() {
  getRequest(
      'myAjax.php', // URL for the PHP file
       drawOutput,  // handle successful request
       drawError    // handle error
  );
  return false;
}  
// handles drawing an error message
function drawError() {
    var container = document.getElementById('output');
    container.innerHTML = 'Bummer: there was an error!';
}
// handles the response, adds the html
function drawOutput(responseText) {
    var container = document.getElementById('output');
    container.innerHTML = responseText;
}
// helper function for cross-browser request object
function getRequest(url, success, error) {
    var req = false;
    try{
        // most browsers
        req = new XMLHttpRequest();
    } catch (e){
        // IE
        try{
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            // try an older version
            try{
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                return false;
            }
        }
    }
    if (!req) return false;
    if (typeof success != 'function') success = function () {};
    if (typeof error!= 'function') error = function () {};
    req.onreadystatechange = function(){
        if(req.readyState == 4) {
            return req.status === 200 ? 
                success(req.responseText) : error(req.status);
        }
    }
    req.open("GET", url, true);
    req.send(null);
    return req;
}

The HTML

<a href="#" onclick="return getOutput();"> test </a>
<div id="output">waiting for action</div>

The PHP

// file myAjax.php
<?php
  echo 'hello world!';
?>

Try it out: http://jsfiddle.net/GRMule/m8CTk/

---

With a javascript library (jQuery et al)

Arguably, that is a lot of Javascript code. You can shorten that up by tightening the blocks or using more terse logic operators, of course, but there's still a lot going on there. If you plan on doing a lot of this type of thing on your project, you might be better off with a javascript library.

Using the same HTML and PHP from above, this is your entire script (with jQuery included on the page). I've tightened up the code a little to be more consistent with jQuery's general style, but you get the idea:

// handles the click event, sends the query
function getOutput() {
   $.ajax({
      url:'myAjax.php',
      complete: function (response) {
          $('#output').html(response.responseText);
      },
      error: function () {
          $('#output').html('Bummer: there was an error!');
      }
  });
  return false;
}

Try it out: http://jsfiddle.net/GRMule/WQXXT/

Don't rush out for jQuery just yet: adding any library is still adding hundreds or thousands of lines of code to your project just as surely as if you had written them. Inside the jQuery library file, you'll find similar code to that in the first example, plus a whole lot more. That may be a good thing, it may not. Plan, and consider your project's current size and future possibility for expansion and the target environment or platform.

If this is all you need to do, write the plain javascript once and you're done.

Documentation

• AJAX on MDN - https://developer.mozilla.org/en/ajax
• XMLHttpRequest on MDN - https://developer.mozilla.org/en/XMLHttpRequest
• XMLHttpRequest on MSDN - http://msdn.microsoft.com/en-us/library/ie/ms535874%28v=vs.85%29.aspx
• jQuery - http://jquery.com/download/
• jQuery.ajax - http://api.jquery.com/jQuery.ajax/

Calling php function inside Javascript code

You can only do it by Making an AJAX request to a php page while passing in a parameter to initialise the function.

That means your AJAX will send in for example "functionName" to the php page "functionsListPage.php"

The GET will be recieved :

 if (isset($_GET['functionName']))
    functionExec();

This is the only way so you are not calling direct from the client however you are indicating to the server you want to run a predefined request.

You cannot call a PHP function directly from the clientside.

Calling PHP Function within Javascript

The PHP function cannot be called in the way that you have illustrated above. However you can call a PHP script using AJAX, code is as shown below. Also you can find a simple example here. Let me know if you need further clarification

Using Jquery

<script type="text/javascript" src="./jquery-1.4.2.js"></script>
<script type="text/javascript">
function compute() {
    var params="session=123";
    $.post('myphpscript.php',params,function(data){ 
            alert(data);//for testing if data is being fetched
            var myObject = eval('(' + data + ')');
            document.getElementById("result").value=myObject(addend_1,addend_2);
        }); 
}
</script>

Barebones Javascript Alternative

   <script type="text/javascript">

    function compute() {
        var params="session=123"
        var xmlHttp; 
        var addend_1=document.getElementById("par_1").value;
        var addend_2=document.getElementById("par_2").value;

        try 
        { 
            xmlHttp = new XMLHttpRequest(); 
        } 
        catch (e) 
        { 
            try 
            { 
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
            } 
            catch (e) 
            { 
                try 
                { 
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
                } 
                catch (e) 
                { 
                    alert("No Ajax for YOU!"); 
                    return false; 
                } 
            } 
        } 
        xmlHttp.onreadystatechange = function() 
        { 
            if (xmlHttp.readyState == 4) { 
                ret_value=xmlHttp.responseText;
                var myObject = eval('(' + ret_value + ')');
                document.getElementById("result").value=myObject(addend_1,addend_2);
            }
        }       
        xmlHttp.open("POST", "http://yoururl/getjs.php", true);
        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlHttp.setRequestHeader("Content-length", params.length);
        xmlHttp.setRequestHeader("Connection", "close");
        xmlHttp.send(params);
    }
    </script>

Execute PHP function with onclick

First, understand that you have three languages working together:

• PHP: It only runs by the server and responds to requests like clicking on a link (GET) or submitting a form (POST).

• HTML & JavaScript: It only runs in someone's browser (excluding NodeJS).

I'm assuming your file looks something like:

<!DOCTYPE HTML>
<html>
<?php
  function runMyFunction() {
    echo 'I just ran a php function';
  }

  if (isset($_GET['hello'])) {
    runMyFunction();
  }
?>

Hello there!
<a href='index.php?hello=true'>Run PHP Function</a>
</html>

Because PHP only responds to requests (GET, POST, PUT, PATCH, and DELETE via $_REQUEST), this is how you have to run a PHP function even though they're in the same file. This gives you a level of security, "Should I run this script for this user or not?".

If you don't want to refresh the page, you can make a request to PHP without refreshing via a method called Asynchronous JavaScript and XML (AJAX).

That is something you can look up on YouTube though. Just search "jquery ajax"

I recommend Laravel to anyone new to start off right: http://laravel.com/

How to call a PHP function from XMLHttpRequest (AJAX)?

What you need to do is make the PHP function run when the PHP file is triggered. To do this, add hello(); at the bottom of functions.php. To have multiple functions, you could have a folder of php files that all do one single function.

If you wanted to have a PHP file with multiple functions that the JS chooses, you could do something like this:

Functions.php

<?php

$function = $_POST["function"];

if ($function == "hello") {
    hello();
}
else if ($function == "goodbye") {
    goodbye();
}

function hello() {
    echo "Hello from function php";
}

function goodbye() {
    echo "Goodbye from function php";
}

?>

index.php

<script>

var xhr = new XMLHttpRequest();
xhr.open('POST','functions.php',true);
xhr.onload = function() {
    console.log(this.responseText);
    // If you wanted to call the function in here, then just make another whole xhr var and send it in this function
}

xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('function=hello');
</script>

Eval could work, but it is an extremely bad idea to use it on data sent by the client (as in a malicious request could delete and read all sorts of data on the server)

---

Related Topics