Ajax Post Request JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript Ajax | Written & Updated By - Riya
In this tutorial we will show you the solution of ajax post request JavaScript, here we needs to use external open source ajax support library script file for request ajax post method.
By using ajax support we can retrieve any files so here we fetching html file using post method in ajax then appending on our html webpage this is simple html file in case you need to use asp,xml,json like some other type file that will also possible.
Step By Step Guide On Ajax Post Request JavaScript :-
Here we defined div element ‘res’ for appending fetched html file requirements on our current html webpage and a button ‘Click’ defined for when user clicks on it then ajax post method will start their process.
In script using ajax library support we defining post method, here we are going to appending external split html data on our webpage.
<!DOCTYPE html>
<html>
<head>
<title>AJAX POST</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="res"></div>
<button>Click</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("api/Welcome.html",function(data){
$(".res").html(data);
});
});
});
</script>
</body>
</html>
Welcome.html
<html>
<head>
<title>Welcome Message</title>
</head>
<body>
<h1>Successfully fetched external file by ajax post</h1>
</body>
</html>- <!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.
- 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.
- Here we defined div element with class attribute ‘res’ for appends external html file on our webpage and a button ‘Click’ defined for proceeds the ajax post process.
- In script ready() method defines it will ready for execution whenever loads on browser within that we wait for button ‘click’ response received by user when clicks on it.
- Here using post method we simply fetching html file ‘Welcome’ stored on folder ‘api’ then parameter ‘data’ will holds ‘Welcome’ html files whole data.
- Finally we appending that data by html() method in our div element ‘res’.
- 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 ajax post request in JavaScript.
When we executes program on browser we can see button ‘Click’ user needs to clicks on button then with the help of ajax post retrieved html file data of message ‘Successfully fetched external file by ajax post’ will appended above ‘Click’ button because we defined div element ‘res’ above ‘Click’ button.
I hope this tutorial on ajax post request JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
