All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Call Ajax Function On Page Load In PHP

Last Updated : Mar 11, 2024

How To Call Ajax Function On Page Load In PHP

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>
  1. First, we write <! DOCTYPE html> which we used as the instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. 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.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Attach an external CSS file using <link> tag
  6. Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
  7. <h1> tag used to add heading here and also adding the inline CSS here.
  8. Create a <input> of the type ‘button’. With id ‘button’ and value ‘Load’.
  9. Creating e empty <div> of the class content
  10. Adding <script> tag to an external jQuery file. And another <script> tag for adding the external JavaScript file.
  11. Close the HTML tag with </html>

PHP code:

<?php
for ($i=0; $i <= 10; $i++) {
    echo $i."<br>" ;
}
?>
  1. <h1>this has been loaded to another page</h1>
  2. <img src="tree.jpg" alt="">
  3. At first <?php tag to write the php.
  4. Adding a for loop to print 1 -10 numbers after reloading the page
  5. Close the php code with ?> tag
  6. And also adding an html image file after the php code

JavaScript code:

$('#button').click(function() {
    $('#content').load('page.php') ;
} );
  1. With the id ‘button’ using click() with a function()
  2. 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.

Author Image About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪