In this article we will show you the solution of jQuery ajax get example, here we needs to use get() and html() methods for achieve the result. The get() method loads data from the server using a HTTP GET request and it may return cached data.
The html() method in jquery used to set or return the innerHTML content of the selected element which returns the content of first matched element.
Step By Step Guide On jQuery Ajax Get Example :-
Here we defined div element with id attribute and button ‘Get Data’ for generates process.
In script block we defined ready() method which is automatically starts loading code of within this function when this program opened on browser and we waiting for click() method’s click event occurrence which is added on button.
Within this we needs to specify get method and it contain name of fetching file, function for appending retrieved data server then loads on webpage.
<!DOCTYPE html>
<html>
<head>
<title>AJAX GET IN JQUERY</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
$.get(
"getAJXphp.php",
{ name: "Lolita" },
function(data){
$('#exm').html(data);
}
)
});
});
</script>
</head>
<body>
<div id="exm">
Data Will Shows Here
</div>
<button>Get Data</button>
</body>
</html>
getAJXphp.php
<?php
if($_REQUEST["name"]){
$name=$_REQUEST["name"];
echo "Welcome ".$name;
}
?>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defined ready() method within that we added click method with button element by tag name ‘button’.
- Within function we defined get method, here we specified name of fetching php file ‘getAJXphp.php’, within curly bracket needs to specify variable with value, function defined with data parameter which refers retrieved details then we displayed data on webpage by using div element id ‘exm’ and html() method.
- In html block we defined div tag with id ‘exm’, text ‘Data Will Shows Here’ and button ‘Get Data’.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to use get ajax in jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error and server supports it need so starts server.
When we executes program on localhost we can see text ‘Data Will Shows Here’ and button ‘Get Data’, now user needs to clicks on it then retrieved php file data with passed argument value will display.
I hope this article on jQuery ajax get example helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
