This is the "Understand jQuery Ajax function" article series. In this article series we are explaining various concepts of jQuery Ajax functions. We have learned how to call various service and web methods using jQuery Ajax functions and we saw how to process and parse XML and JSON data with it. A complete example is included.
In this article we will learn the uses of the get(), put() and post() methods. Confusion may exist that this is series is for understanding Ajax functions but why we are we only explaining those three functions? The reason is that those functions are very related to Ajax functions and internally they use Ajax functions to process data. In this article we will understand them one by one.
Understand get() method
The Get() method is necessary when we want to get data either from a service or another server function or plain text or HTML page. Here is one example of the get() function. In this example we are calling one plain HTML page located in the same location as our current page is located.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="WebApplication.JavaScript" %>
<head id="Head1" runat="server">
<script src="jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function () {
$("#Submit").click(function () {
$.get("dummy.html", function (data) {
$("#content").html(data);
});
});
});
</script>
</head>
<body>
<form id="From1" method="post">
<input type="button" value="submit" name="Submit" id="Submit" />
<div id="content">
</div>
</form>
</body>
</html>
Here is sample output. The content of the HTML page is being display within a div tag.
![jQuery Ajax Get Method]()
Various callback functions of the get() method
In this example we will explain various callback functions of the get() method. We are seeing that we have defined various callback functions, like done() , fail(), always() and so on. Try to understand the following example.
<script>
$(document).ready(function () {
$("#Submit").click(function () {
$.get("dummy.html", function (data) {
$("#content").html(data);
}).done(function () {
$("#content").append("Done!");
}).fail(function () {
$("#content").append(" Fail!");
}).always(function () {
$("#content").append(" Always Show.");
});
});
});
</script>
Here is sample output of the above example.
![callback function of get method]()
Understand post() method
The Post() method is perfect when we want to post some data to some web method or service method. For example, we want to collect form data and want to pass it to a service method. Here is a small example of the post() method.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="WebApplication.JavaScript" %>
<head id="Head1" runat="server">
<script src="jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function () {
$("#Submit").click(function () {
$.post("JavaScript.aspx/TestAjax", function () {
}).done(function () {
$("#content").html("Data Posted to WebMethod");
});
});
});
</script>
</head>
<body>
<form id="From1" method="post">
<input type="button" value="submit" name="Submit" id="Submit" />
<div id="content">
</div>
</form>
</body>
</html>
The following is the output of the post() method:
![jQuery Ajax Post Method]()
Various callback functions of the post() method
Like the get() method, the post() also has various callback functions. In this example we will see a few of them.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="WebApplication.JavaScript" %>
<head id="Head1" runat="server">
<script src="jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function () {
$("#Submit").click(function () {
$.post("JavaScript.aspx/TestAjax", function () {
}).done(function () {
$("#content").html("Data Posted to WebMethod ");
}).complete(function () {
$("#content").append("Post Completed. !");
}).always(function () {
$("#content").append("Always fire. !");
}).error(function () {
$("#content").append("Error Occur !");
}).fail(function () {
$("#content").append("Fail in posting Data !");
}).success(function () {
$("#content").append("completed successfully !");
});
});
});
</script>
</head>
<body>
<form id="From1" method="post">
<input type="button" value="submit" name="Submit" id="Submit" />
<div id="content">
</div>
</form>
</body>
</html>
This is the sequence of execution of the callback function of the post() method.
![callback function of Post method]()
Understand load() method
We saw that get() and post() are very similar in terms of syntax, but the load() function is a little bit different from them. We need to use the load() function in association with some DOM element. Try to understand the following example:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="WebApplication.JavaScript" %>
<head id="Head1" runat="server">
<script src="jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function () {
$("#Submit").click(function () {
$("#content").load("dummy.html", function () {
$("#content").append("Data Loaded...!");
});
});
});
</script>
</head>
<body>
<form id="From1" method="post">
<input type="button" value="submit" name="Submit" id="Submit" />
<div id="content">
</div>
</form>
</body>
</html>
In this example we are seeing that the load() function has been used associated with the "content" div element. This is the output of the above example.
![jQuery Ajax Load Method]()
Callback function of load function
load() also has callback functions like get() and post(). In this example we will see them.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="WebApplication.JavaScript" %>
<head id="Head1" runat="server">
<script src="jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function () {
$("#Submit").click(function () {
$("#content").load("dummy.html", function () {
$("#content").append("Data Loaded...!");
}).ajaxComplete(function () {
$("#content").append("Completed...!");
});
});
});
</script>
</head>
<body>
<form id="From1" method="post">
<input type="button" value="submit" name="Submit" id="Submit" />
<div id="content">
</div>
</form>
</body>
</html>
![Callback function of load function]()
Conclusion
In the examples above we saw how to use the get(), put() and load() functions in jQuery. In a future series we will explain a few more on the same topic.