I am trying to call a PHP function from an external PHP file into a JavaScript script. My code is different and large, so I am writing a sample code here. This is my PHP code:
So this is what I want to do. My original PHP file doesn’t include these mathematical functions but the idea is same. If some how it doesn’t have a proper solution, then may you please suggest an alternative, but it should call values from external PHP.
php is server side js is client side. You’ll need to use ajax or page refresh with gets/posts or try creating a js equivalent function.
13 Answers 13
Yes, you can do ajax request to server with your data in request parameters, like this (very simple):
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); ?>
Yup, nice answer. I’m just adding to the note about jQuery, that this tends to be slower. Another alternative can be using browser native XMLHttpRequest like for example here blog.garstasio.com/you-dont-need-jquery/ajax/#posting
i was looking for calling php function when an input change, so this give me a clue i ended up using fetch, Thank you
Although this solution works, it is not a clean and a good way to do it. It has tight dependency between client and server code. Much better design would be using ajax to send request to a php page that has the php function call.
@Shadi — I’m curious, what’s wrong with having a «tight dependency between client and server code»? Is there a potential problem, or is this only a matter of «tidy coding»?
@ashleedawg good question, as if using Ajax somehow doesn’t require a «tight dependency» between client side and server side..
use document.write for example,
Make sure when using this that you join up the ‘
You need to create an API : Your js functions execute AJAX requests on your web service
var mult = function(arg1, arg2) $.ajax( < url: "webservice.php?action=mult&arg1="+arg1+"&arg2 action"] variable)
)" data-controller="se-share-sheet" data-se-share-sheet-title="Share a link to this answer" data-se-share-sheet-subtitle="" data-se-share-sheet-post-type="answer" data-se-share-sheet-social="facebook twitter devto" data-se-share-sheet-location="2" data-se-share-sheet-license-url="https%3a%2f%2fcreativecommons.org%2flicenses%2fby-sa%2f3.0%2f" data-se-share-sheet-license-name="CC BY-SA 3.0" data-s-popover-placement="bottom-start">Share
why are you using function expression? this is more fitting for function declaration.
– Nguai al
Jan 17, 2020 at 9:17
Add a comment|
7
index.php
.
This work perfectly for me:
To call a PHP function (with parameters too) you can, like a lot of people said, send a parameter opening the PHP file and from there check the value of the parameter to call the function. But you can also do that lot of people say it's impossible: directly call the proper PHP function, without adding code to the PHP file.
This for JavaScript:
function callPHP(expression, objs, afterHandler) < expression = expression.trim(); var si = expression.indexOf("("); if (si == -1) expression += "()"; else if (Object.keys(objs).length >0) < var sfrom = expression.substring(si + 1); var se = sfrom.indexOf(")"); var result = sfrom.substring(0, se).trim(); if (result.length >0) < var params = result.split(","); var theend = expression.substring(expression.length - sfrom.length + se); expression = expression.substring(0, si + 1); for (var i = 0; i < params.length; i++) < var param = params[i].trim(); if (param in objs) < var value = objs[param]; if (typeof value == "string") value = "'" + value + "'"; if (typeof value != "undefined") expression += value + ","; >> expression = expression.substring(0, expression.length - 1) + theend; > > var doc = document.location; var phpFile = "URL of your PHP file"; var php = "$docl = str_replace('/', '\\\\', '" + doc + "'); $absUrl = str_replace($docl, $_SERVER['DOCUMENT_ROOT'], str_replace('/', '\\\\', '" + phpFile + "'));" + "$fileName = basename($absUrl);$folder = substr($absUrl, 0, strlen($absUrl) - strlen($fileName));" + "set_include_path($folder);include $fileName;" + expression + ";"; var url = doc + "/phpCompiler.php" + "?code ;", $code); foreach($lines as $line) eval(trim($line, " ") . ";"); ?>
So, your PHP code remain equals except return values, which will be echoed:
I suggest you to remember that jQuery is required: Download it from Google CDN:
or from Microsoft CDN: "I prefer Google! :)"
Better is to download the file from one of two CDNs and put it as local file, so the startup loading of your website's faster!
Now you finished! I just tell you how to use callPHP function. This is the JavaScript to call PHP:
//Names of parameters are custom, they haven't to be equals of these of the PHP file. //These fake names are required to assign value to the parameters in PHP //using an hash table. callPHP("add(num1, num2)", < 'num1' : 1, 'num2' : 2 >, function(output) < alert(output); //This to display the output of the PHP file. >);
If you’re using PHP files to render your web pages, then you can call the PHP function from JavaScript by calling the PHP echo() function.
Suppose you have an index.php file with the following content:
Then, you write your HTML content right below the function as follows:
You can include a tag inside the tag that calls on PHP function as follows:
When you open your index.php file from the browser, you will see the HTML rendered as follows:
Any PHP code that you include inside your HTML page will be processed on the server-side before being served to the browser.
When you call a PHP function inline from JavaScript as shown above, you can’t use dynamic values from user input.
If you want to call PHP function as a response to user action, then you need to send HTTP request from JavaScript to the PHP file. Let’s learn that next.
Call PHP function from JavaScript over HTTP request
separate your PHP file from your HTML file
Call the PHP function over an HTTP request using fetch() JavaScript method
First, separate your PHP function in a different file. Let’s call the file add.php and put the following content inside it:
Next, create an index.html file in the same folder where you created the add.php file and put the following content inside it:
The fetch() method will be executed each time the element is clicked. JavaScript will send a POST request to the PHP server and write the response inside the element.
In the code above, I used the full URL of my add.php , which is located at http://localhost:8000/add.php . You need to change the address to your actual PHP file location.
Once your files are ready, open the index.html file from the browser. Please make sure that you’re opening the HTML file from the same server that serve your PHP files to avoid CORS issues.
You can run a local PHP server using php -s localhost:8000 command and open localhost:8000/index.html from the browser to see your HTML page.
When you click on the button, the fetch() method will be executed and JavaScript will put the response inside the element.
The resulting HTML would be as follows:
Now that your code is working, you can add elements to the HTML page and assign the values that the user puts in those elements to x and y variables. The PHP function should be able to add the dynamic values correctly
And those are the two ways you can call PHP function from JavaScript. More often, you’d want to separate the PHP files from your JavaScript files and call PHP function using HTTP requests.
The same pattern also works when you’re developing web app using modern PHP framework like Laravel and modern JavaScript libraries like React and Vue.
You can use the fetch() method and send a POST request to the right Laravel API route that you created and send the right parameters.
Learn JavaScript for Beginners 🔥
Get the JS Basics Handbook, understand how JavaScript works and be a confident software developer.
A practical and fun way to learn JavaScript and build an application using Node.js.
About
Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials. Learn statistics, JavaScript and other programming languages using clear examples written for people.
The following code is from xyz.html (on a button click) it calls a wait() in an external xyz.js. This wait() calls wait.php.
function wait() < xmlhttp=GetXmlHttpObject(); var url="wait.php"; \ xmlhttp.onreadystatechange=statechanged; xmlhttp.open("GET", url, true); xmlhttp.send(null); >function statechanged() < if(xmlhttp.readyState==4) < document.getElementById("txt").innerHTML=xmlhttp.responseText; >>
where loadxml() calls code from another PHP file the same way. The loadxml() is working fine otherwise, but it is not being called the way I want it.
12 Answers 12
As far as PHP is concerned (or really, a web server in general), an HTML page is nothing more complicated than a big string.
All the fancy work you can do with language like PHP - reading from databases and web services and all that - the ultimate end goal is the exact same basic principle: generate a string of HTML*.
Your big HTML string doesn't become anything more special than that until it's loaded by a web browser. Once a browser loads the page, then all the other magic happens - layout, box model stuff, DOM generation, and many other things, including JavaScript execution.
So, you don't "call JavaScript from PHP", you "include a JavaScript function call in your output".
There are many ways to do this, but here are a couple.
Escaping from php mode to direct output mode:
You don't need to return a function name or anything like that. First of all, stop writing AJAX requests by hand. You're only making it hard on yourself. Get jQuery or one of the other excellent frameworks out there.
Secondly, understand that you already are going to be executing javascript code once the response is received from the AJAX call.
Here's an example of what I think you're doing with jQuery's AJAX
$.get( 'wait.php', <>, function(returnedData) < document.getElementById("txt").innerHTML = returnedData; // Ok, here's where you can call another function someOtherFunctionYouWantToCall(); // But unless you really need to, you don't have to // We're already in the middle of a function execution // right here, so you might as well put your code here >, 'text' ); function someOtherFunctionYouWantToCall() < // stuff >
Now, if you're dead-set on sending a function name from PHP back to the AJAX call, you can do that too.
$.get( 'wait.php', <>, function(returnedData) < // Assumes returnedData has a javascript function name window[returnedData](); >, 'text' );
