This is the "Web API with AJAX" article series. Here we are explaining various concepts of the ajax() function of jQuery by combining it with the Web API . We have explained various concepts of RESTful services and the ajax() function to consume them. You can visit all those articles by clicking on the following links:
In this article we will learn various parameters of a success callback function in the ajax() function of jQuery. We know that the jQuery ajax() function supports many callback functions and among them "success" and "error" are very popular. So, let's start to understand with examples.
First of all we will create this "person" controller where we have defined one POST action named "PostAction" that is returning one string . And in all examples we will use the same controller.
public class personController : ApiController
{
[HttpPost]
public String PostAction()
{
return "This is post";
}
}
Get return data from controller
From the "PostAction" action of the person controller we are returning string data (that will be returned as JSON) and we need to get it in the ajax() function. Here is the implementation of the ajax() function.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="APICall.aspx.cs" Inherits="WebApplication1.APICall" %>
<head id="Head1" runat="server">
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#Save").click(function () {
$.ajax({
url: 'http://localhost:3413/api/person',
type: 'POST',
dataType: 'json',
success: function (data, status, textStatus) {
console.log("Value of data:- " + data);
},
error: function (xhr, textStatus, errorThrown) {
console.log('Error in Operation');
}
});
});
});
</script>
</head>
<body>
<input type="button" id="Save" value="Save Data" />
</body>
</html>
We are receiving return data using a "data" parameter. Here is the output with the content of the "data" parameter.
![return data from controller]()
Status parameter to check status
The status parameter helps to check the status of the ajax() request and response. In this example we are printing the value of the status parameter.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="APICall.aspx.cs" Inherits="WebApplication1.APICall" %>
<head id="Head1" runat="server">
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#Save").click(function () {
$.ajax({
url: 'http://localhost:3413/api/person',
type: 'POST',
dataType: 'json',
success: function (data, status, textStatus) {
console.log("Value of status:- " + status);
},
error: function (xhr, textStatus, errorThrown) {
console.log('Error in Operation');
}
});
});
});
</script>
</head>
<body>
<input type="button" id="Save" value="Save Data" />
</body>
</html>
It's showing "success"; that means the AJAX operation has been done successfully.
![Status parameter]()
Textstatus to get Entire status of response
In the previous example we saw that the status parameter only contains the status of the AJAX operation. If we want to gather more information then we need to use the textStatus parameter.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="APICall.aspx.cs" Inherits="WebApplication1.APICall" %>
<head id="Head1" runat="server">
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#Save").click(function () {
$.ajax({
url: 'http://localhost:3413/api/person',
type: 'POST',
dataType: 'json',
//data:{"":"Sourav","":"Kayal"},
success: function (data, status, textStatus) {
console.log("Value of testStatus:- " + JSON.stringify(textStatus));
},
error: function (xhr, textStatus, errorThrown) {
console.log('Error in Operation');
}
});
});
});
</script>
</head>
<body>
<input type="button" id="Save" value="Save Data" />
</body>
</html>
Here is the full response information of the AJAX operation.
![Textstatus to get Whole status of response]()
We are seeing that the ready state is "4"; that means the server is fully ready to serve the request. The status is 200, which means OK and is a success response.
Xhr to get entire demographics of AJAX call
We can use the "xhr" parameter to get the entire demographics of the AJAX operation. In this example we are printing the value of the "xhr" variable.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="APICall.aspx.cs" Inherits="WebApplication1.APICall" %>
<head id="Head1" runat="server">
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#Save").click(function () {
$.ajax({
url: 'http://localhost:3413/api/person',
type: 'POST',
dataType: 'json',
success: function (data, textStatus, xhr) {
console.log(xhr);
},
error: function (xhr, textStatus, errorThrown) {
console.log('Error in Operation');
}
});
});
});
</script>
</head>
<body>
<input type="button" id="Save" value="Save Data" />
</body>
</html>
Here is the output of the example above.
![xhr parameter]()
Conclusion
In this article we have learned three important parameters of the success callback function of the jQuery ajax() function. I hope you have the basic idea of them. Happy programming.