How to create jQuery Ajax get request
source link: https://www.laravelcode.com/post/how-to-create-jquery-ajax-get-request
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK