In this article we will show you the solution of jQuery ajax post example, when using the jQuery Ajax Post method, asynchronous HTTP POST requests are made to the server in order to load data.
As a result of Ajax (Asynchronous JavaScript and XML), websites can be updated with data without reloading the entire site.
AJAX capabilities can be added to jQuery in several ways.
One of the methods we may use to directly load data from the server onto the webpage is by utilising an HTTP POST request. The ajax() post function shortcut is $.post ().
Step By Step Guide On jQuery Ajax Post Example :-
A webpage can be queried for data using the jQuery $.post() method, and the returned data can then be shown on the original webpage without having to reload the page.
The HTTP POST request is used by the $.post() method to submit requests and some data. As a result, a request is made to a webpage (in this case, jquery post.php) from another page.
Syntax
$.post(url, [data], [callback(data, status, xhr)], [type])
Where, url is the URL that is referenced in a request to retrieve data.
The json data that is delivered to the server with the request is represented by the optional parameter data.
Another optional parameter, callback (data, status, xhr), designates the action to be taken after the request has been made and the data has been successfully loaded.
data is a reference to the information provided in the server's response.
The term "status" refers to a request's current state, which can be success, error, timeout, not updated, etc. XMLHttpRequest object is referred to as xhr.
Type, which can be one of JSON, JSONP, XML, HTML, script, or text, is another optional argument that tells the server what kind of data to deliver as a response.
- URL - The URL parameter has been set up for the requested page's URL, which may interact with the database to produce the desired results.
- data - Data is intended to be sent with the request through the data parameter.
- callback - The callback parameter specifies a function that will be run if the request is successful. Two subparameters are contained in this; the first one provides the information returned from the page that was requested, and the second one contains the request status.
What is the jQuery Ajax Post Process?
The jQuery Ajax Post method, often known as the shortcut $.post() method, sends asynchronous HTTP POST requests to web servers and receives data back in the form of HTML, XML, JSON, etc.
The example of an ajax POST request delivered to the server is provided below.
$.ajax({
type: "POST",
url: url,
data: data,
dataType: ‘json’,
success: function(){
},
error: function(){
}
});
The first parameter in the format above is "type," which denotes the kind of call being made to the server; in this case, it is POST, which launches an HTTP POST request.
The second parameter is the URL that we wish to use to submit our data using an HTTP POST request.
Data that must be sent to the server via the POST request is the third parameter.
The success callback method, which only receives a call if the response is successful as well as the server responds, has a fourth parameter.
The callback function, in turn, takes three parameters: data, status, and jqXHR. The data parameter holds the server answer.
In the event that such AJAX POST request fails & throws an error, an error callback is triggered.
The final parameter, dataType, is set to JSON in this case. This indicates that the servers give the result in JSON format that once POST request is successful.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("demo_test_post.asp",
{
name: "Mudit Jain",
city: "Delhi"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>
<button>Send an HTTP POST request to a page and get the result back</button>
</body>
</html>
asp file
<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>
- We start our code by using HTML & HEAD Tags.
- Next, we import the jQuery library using script.
- Following that, we launch our script.
- The jQuery code is then executed using the ready() method.
- Next, we employ the button's click() function.
- Next, we utilise the post() function to access the URL demo test post.asp. Then we submit some information alongside the request that we have received (name and city).Then The ASP script in "demo_test_post.asp" reads the parameters, processes them, and returns a result.
- Next, we write the function that allows us to obtain the status.
- Next, we conclude the script and begin the body.
- We merely make the button to receive the alert message in the body.
- With BODY & HTML, we finish off our code.
- You can observe the asp file's appearance after the code.
Conclusion :-
As a result, we have successfully acquired knowledge about the jQuery ajax post example.
Additionally, we discovered that jQuery's implementation of Ajax Post.
Ajax refers to data exchange with a web server, allowing asynchronous updating of online pages.
Ajax Post is the method of loading data from the web server via synchronous HTTP POST requests.
I hope this article on jQuery ajax post example helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
