How To Call Ajax Function On Page Load In PHP
Last Updated : Mar 11, 2024
IN - PHP Ajax | Written & Updated By - Pragati
In this article we will show you the solution of how to call ajax function on page load in PHP, to call the ajax function on page load we have to add an external jQuery file first. By clicking on a button we can load the page. It can also show alert messages.
We will see three blocks of codes for HTML, Php, and JavaScript.
Step By Step Guide On How To Call Ajax Function On Page Load In PHP :-
let us see the code for the HTML, PHP, and JavaScript files first.
HTML code:
<!DOCTYPE html> <html lang = " en " > <head> <meta charset = " UTF - 8" > <meta http-equiv = " X-UA-Compatible " content = " IE=edge " > <meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " > <title> how to call ajax function on page load in php </title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"> </head> <body> <h1 style=" color : rgb(113, 221, 113) ;"> TALKERSCODE </h1> <h2> how to call ajax function on page load in php </h2> <input type="button" id="button" value="Load"> <div id="content"> </div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="custom.js"></script> </body> </html>
- First, we write <! DOCTYPE html> which we used as the instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As mentioned above, the <head> tag contains information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Attach an external CSS file using <link> tag
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here and also adding the inline CSS here.
- Create a <input> of the type ‘button’. With id ‘button’ and value ‘Load’.
- Creating e empty <div> of the class content
- Adding <script> tag to an external jQuery file. And another <script> tag for adding the external JavaScript file.
- Close the HTML tag with </html>
PHP code:
<?php
for ($i=0; $i <= 10; $i++) {
echo $i."<br>" ;
}
?>
- <h1>this has been loaded to another page</h1>
- <img src="tree.jpg" alt="">
- At first <?php tag to write the php.
- Adding a for loop to print 1 -10 numbers after reloading the page
- Close the php code with ?> tag
- And also adding an html image file after the php code
JavaScript code:
$('#button').click(function() {
$('#content').load('page.php') ;
} );
- With the id ‘button’ using click() with a function()
- With the id ‘content’ using the load().
Conclusion :-
At last, here in conclusion, here we can say that with this article’s help, we know how to call the ajax function on page load using PHP.
I hope this article on how to call ajax function on page load in PHP helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
