INTRODUCTION
CLIENT-SERVER SCRIPTS
Welcome to a Tutorial on how to call PHP file from Javascript. So you need to call a PHP file to complete a process from Javascript? Well, there are actually many ways to do it, and we will walk through some examples in this guide. Read on to find out!
I have included a zip file with all the source code at the end of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
CONFESSION
AN HONEST DISCLOSURE
Quick, hide your wallets! I am an affiliate partner of Google, eBay, Adobe, Bluehost, Clickbank, and more. There are affiliate links and advertisements throughout this website. Whenever you buy things from the evil links that I recommend, I will make a commission. Nah. These are just things to keep the blog going, and allows me to give more good stuff to you guys - for free. So thank you if you decide to pick up my recommendations!
NAVIGATION
TABLE OF CONTENTS
Method 1 | Method 2 | Method 3 |
Method 4 | Extra | Extra |
Closing |
METHOD 1
AJAX CALL
This is the recommended way to do it, and for those of you who do not know – AJAX stands for Asynchronous Javascript And XML. It is what drives most modern websites these days, as it allows you to do multiple background processes with reloading the entire page.
THE HTML & JAVASCRIPT
Call PHP File via AJAX
This should be pretty straightforward, and there are 2 parts to the HTML:
- First, we have our usual HTML form at the bottom.
- Secondly, we use Javascript to handle the submission of the form. But instead of directly submitting the form, we create an AJAX request that will run in the background instead.
THE PHP SCRIPT
$pass ? 1 : 0,
"message" => $pass ? "OK" : "An error has occured"
]);
?>This script works just as how you would normally handle an HTML form POST. But do take note that we use JSON to format a server response on how the processing went – If it is successful or if an error occurred. This is picked up by xhr.onload in the Javascript.
METHOD 2
FORM SUBMISSION
This is an old-school method that involves submitting an HTML form, not quite recommended as it involves reloading the entire page, but it works.
THE HTML & JAVASCRIPT
Call PHP File via Form Submission
";
foreach ($error as $e) {
echo "$e
";
}
echo "There are 3 parts to this script:
- First, we have our HTML form as usual.
- Next, the Javascript that will do some checks and processing.
- Finally, a container to show error messages (if any) after PHP processing.
THE PHP SCRIPT
On the HTML form submission, the user input will POST to this script – Handle it as required, then output the results accordingly.
METHOD 3
GAME OF REDIRECTION
This is yet another old school way, and it involves redirecting users to your PHP page while passing the data in a query string. Not quite recommended, but still pretty common these days.
THE HTML & JAVASCRIPT
Redirection with Query String
TOTAL SUM IS $total";
} ?>
This is very similar to the HTML form submission – An optional form on top, Javascript to formulate the redirection URL and query string, and the process result.
THE PHP
This should be self-explanatory.
METHOD 4
THE UNORTHODOX WAY
Well, this final example is a bad one… It kind of works, but this is how to NOT do it.
THE HTML & JAVASCRIPT
Unorthodox Way - Dynamic Javascript
THE PHP
alert(=$total?>);What happens in this method is very roundabout:
- We get the user input from the HTML form.
- Create a new script tag, point it to the PHP file, and add the user input in a query string.
- Process the PHP as usual, then weave it to output Javascript.
Yep, just use AJAX…
EXTRA
USEFUL BITS
That’s all for this project, and here is a small section on some extras that may be useful to you.
PASSING VARIABLES
Need to pass variables from PHP to Javascript? Here’s how:
5 Ways to Pass PHP Variables & Arrays to Javascript
AJAX
Just what is AJAX? Why is it so awesome and important? Read my other guide:
Vanilla Javascript AJAX Tutorial (Learn With Examples)
EXTRA
DOWNLOAD
Finally, here is the download link as promised.
SOURCE CODE DOWNLOAD
Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
CLOSING
WHAT’S NEXT?
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you in your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
The post How to Call PHP File From Javascript appeared first on Code Boxx.
