How to create jQuery Ajax get request
While sending Ajax request, sometimes you just need to get data and load to HTML element or load external script. Sometimes you need to load data and perform operation on it. That's why jQuery provides different ways to call get request.
In this article, we will discuss different ways to call Ajax get request in a different condition. Let's start from load() method.
load() method
This is a simple way to fetch data from server and place it to into the matched elements. When the request receive successful response, return data is placed into matched elements. If no element is matched by the selector, the Ajax request will not be sent.
Syntax:
$(selector).load(url, data, callback);parameters:
url required which you want to load.
data optional if you want to send query string or json data with request
callback optional function which will be called after Ajax request completed.
Example:
<!doctype html>
<html>
<body>
<p>pre</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$('#heading').load('https://catfact.ninja/fact');
</script>
</body>
</html>$.getScript() method
$.getScript() method is used to get and execute Javascript file from the server using Ajax request.
Syntax:
$(selector).getScript(url, callback);Parameters:
url required which you want to load.
callback optional function which will be called after Ajax request success.
You can load Javascript file on Javascript event for example, click, page load etc. Here is the example:
<!doctype html>
<html>
<body>
<p id="paragraph"></p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$.getScript('https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js', function() {
alert('Bootstrap Javascript loaded.');
});
</script>
</body>
</html>$.get() method
$.get() method is similar to .load() method except that this function has an implicit callback. This is shorthand function for $.ajax() method.
Syntax:
$.get(url, data, callback);parameters:
url required which you want to load.
data optional if you want to send query string or json data with request
callback optional function which will be called after Ajax request completed.
Example:
<!doctype html>
<html>
<body>
<p id="paragraph"></p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$.get('https://api.agify.io/', 'name=jitesh', function(data) {
$('#paragraph').text(data.name+' is '+data.age+' years old.');
});
</script>
</body>
</html>$.ajax() function
<!doctype html>
<html>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
var jqxhr = $.get('https://catfact.ninja/fact', function() {
alert('success');
})
.done(function() {
alert('done');
})
.fail(function() {
alert('error');
})
.always(function() {
alert('always');
});
</script>
</body>
</html>You can chain additional methods to perform operation based on response. fail() will executed if there is error in Ajax request. always() function will executed always even if Ajax request failed.
$.ajax() method
The $.ajax() method is used to perform an asynchronous Ajax HTTP request. It can send get or post method.
Syntax:
$.ajax(settingObject);settingObject is json object of parameters with below name:value.
| Name | Description |
|---|---|
| url | Absolute or relative url where request will send |
| type | Request type 'get' or 'post' |
| data | data which will be send with request, Json or query string etc |
| dataType | Type of the data |
| contentType | Type of the content sending data to the server. |
| async | Boolean If the request is async or sync. |
| beforeSend | A function to be called before request send |
| success | A function which executes after request success |
| error | A function which executes if request fail |
| complete | A function which executes after success or error function |
| username | username for authenticated request |
| password | password for authenticated request |
Here is the example how to create Ajax get request:
<!doctype html>
<html>
<body>
<p id="paragraph"></p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$.ajax({
url: 'https://api.agify.io/',
type: 'get',
data: 'name=jitesh',
success: function(data) {
$('#paragraph').text(data.name+' is '+data.age+' years old.');
},
error: function(error) {
$('#paragraph').text('Something went wrong');
}
});
</script>
</body>
</html>I hope you liked the article.
Copyright 2023 HackTheStuff
