jQuery AJAX
1. $.get() Example
This example fetches a placeholder post title using $.get() from JSONPlaceholder API.
<button id="getPostBtn">Get Post</button>
<p id="getPostResult"></p>
<script>
$(document).ready(function () {
$('#getPostBtn').click(function () {
$.get('https://jsonplaceholder.typicode.com/posts/1', function (data) {
$('#getPostResult').text('Title: ' + data.title);
});
});
});
</script>
2. $.post() Example
This example simulates sending data with $.post() (you won’t see actual database update).
<button id="postBtn">Send Post</button>
<p id="postResult"></p>
<script>
$(document).ready(function () {
$('#postBtn').click(function () {
$.post('https://jsonplaceholder.typicode.com/posts', {
title: 'New Post',
body: 'Post body content',
userId: 1
}, function (data) {
$('#postResult').text('Posted with ID: ' + data.id);
});
});
});
</script>
3. $.ajax() Method
This uses $.ajax() to load user data and display their name.
<button id="ajaxBtn">Load User</button>
<p id="ajaxResult"></p>
<script>
$(document).ready(function () {
$('#ajaxBtn').click(function () {
$.ajax({
url: 'https://jsonplaceholder.typicode.com/users/1',
method: 'GET',
success: function (data) {
$('#ajaxResult').text('User Name: ' + data.name);
},
error: function () {
$('#ajaxResult').text('Error loading user.');
}
});
});
});
</script>
If you have any questions, feel free to ask. Thank you for reading!
If you have any query or question, please contact through below form. Our team will be in touch with you soon.
Please provide your valueable feedback or suggession as well.