WHY USE JQUERY FOR AJAX REQUESTS?
I think it is to make things easier, have shorter more readable code. You can see some code examples of doing an AJAX request without jQuery here and here.
As you can see on those links, some tasks include creating a catch for different browser XMLHttpRequest, opening the url, checking if the request is in ready state and setting the request header.
jQuery solves this by having a short, more readable syntax.
1. JQUERY POST FORM DATA USING .AJAX() METHOD
This is a great way to show someone that you are now an AJAX programmer. Because of this .ajax() piece of code in your HTML page, you may now face the world with confidence and with a beautiful smile in your face.
<html>
<head>
<title>jQuery post form data using .ajax()</title>
</head>
<body>
<h1>jQuery post form data using .ajax() method</h1>
<div>Fill out and submit the form below to get response.</div>
<!-- our form -->
<form id='userForm'>
<div><input type='text' name='firstname' placeholder='Firstname' /></div>
<div><input type='text' name='lastname' placeholder='Lastname' /></div>
<div><input type='text' name='email' placeholder='Email' /></div>
<div><input type='submit' value='Submit' /></div>
</form>
<!-- where the response will be displayed -->
<div id='response'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function(){
$('#userForm').submit(function(){
// show that something is loading
$('#response').html("<b>Loading response...</b>");
/*
* 'post_receiver.php' - where you will pass the form data
* $(this).serialize() - to easily read form data
* function(data){... - data contains the response from post_receiver.php
*/
$.ajax({
type: 'POST',
url: 'post_receiver.php',
data: $(this).serialize()
})
.done(function(data){
// show the response
$('#response').html(data);
})
.fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
</script>
</body>
</html>
POSTED DATA
<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>
2. JQUERY POST FORM DATA USING .POST() METHOD
.post() method has a more descriptive syntax, it is a shorthand of .ajax() method above. See how it was commonly used with the code below:
<html>
<head>
<title>jQuery post form data using .post()</title>
</head>
<body>
<h1>jQuery post form data using .post() method</h1>
<div>Fill out and submit the form below to get response.</div>
<!-- our form -->
<form id='userForm'>
<div><input type='text' name='firstname' placeholder='Firstname' /></div>
<div><input type='text' name='lastname' placeholder='Lastname' /></div>
<div><input type='text' name='email' placeholder='Email' /></div>
<div><input type='submit' value='Submit' /></div>
</form>
<!-- where the response will be displayed -->
<div id='response'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function(){
$('#userForm').submit(function(){
// show that something is loading
$('#response').html("<b>Loading response...</b>");
/*
* 'post_receiver.php' - where you will pass the form data
* $(this).serialize() - to easily read form data
* function(data){... - data contains the response from post_receiver.php
*/
$.post('post_receiver.php', $(this).serialize(), function(data){
// show the response
$('#response').html(data);
}).fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
</script>
</body>
</html>
POSTED DATA
<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>
3. JQUERY POST JSON DATA USING .POST() METHOD
Sometimes you don’t want to post data from an HTML form. You can do it by creating a JSON string, and here’s how you’ll be able to post it.
<html>
<head>
<title>jQuery post JSON data using .post() method by codeofaninja.com</title>
</head>
<body>
<h1>jQuery post JSON data using .post() method</h1>
<div>Click the button below to get response.</div>
<!-- our form -->
<input type='button' value='Post JSON' id='postJson' />
<!-- where the response will be displayed -->
<div id='response'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function(){
$('#postJson').click(function(){
// show that something is loading
$('#response').html("<b>Loading response...</b>");
/*
* 'post_receiver.php' - where you will pass the form data
* $(this).serialize() - to easily read form data
* function(data){... - data contains the response from post_receiver.php
*/
$.post('post_receiver.php', { user_id: "143", username: "ninjazhai", website: "https://demo.com/" }, function(data){
// show the response
$('#response').html(data);
}).fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
</script>
</body>
</html>
POSTED DATA
<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>
I think it is to make things easier, have shorter more readable code. You can see some code examples of doing an AJAX request without jQuery here and here.
As you can see on those links, some tasks include creating a catch for different browser XMLHttpRequest, opening the url, checking if the request is in ready state and setting the request header.
jQuery solves this by having a short, more readable syntax.
1. JQUERY POST FORM DATA USING .AJAX() METHOD
This is a great way to show someone that you are now an AJAX programmer. Because of this .ajax() piece of code in your HTML page, you may now face the world with confidence and with a beautiful smile in your face.
<html>
<head>
<title>jQuery post form data using .ajax()</title>
</head>
<body>
<h1>jQuery post form data using .ajax() method</h1>
<div>Fill out and submit the form below to get response.</div>
<!-- our form -->
<form id='userForm'>
<div><input type='text' name='firstname' placeholder='Firstname' /></div>
<div><input type='text' name='lastname' placeholder='Lastname' /></div>
<div><input type='text' name='email' placeholder='Email' /></div>
<div><input type='submit' value='Submit' /></div>
</form>
<!-- where the response will be displayed -->
<div id='response'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function(){
$('#userForm').submit(function(){
// show that something is loading
$('#response').html("<b>Loading response...</b>");
/*
* 'post_receiver.php' - where you will pass the form data
* $(this).serialize() - to easily read form data
* function(data){... - data contains the response from post_receiver.php
*/
$.ajax({
type: 'POST',
url: 'post_receiver.php',
data: $(this).serialize()
})
.done(function(data){
// show the response
$('#response').html(data);
})
.fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
</script>
</body>
</html>
POSTED DATA
<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>
2. JQUERY POST FORM DATA USING .POST() METHOD
.post() method has a more descriptive syntax, it is a shorthand of .ajax() method above. See how it was commonly used with the code below:
<html>
<head>
<title>jQuery post form data using .post()</title>
</head>
<body>
<h1>jQuery post form data using .post() method</h1>
<div>Fill out and submit the form below to get response.</div>
<!-- our form -->
<form id='userForm'>
<div><input type='text' name='firstname' placeholder='Firstname' /></div>
<div><input type='text' name='lastname' placeholder='Lastname' /></div>
<div><input type='text' name='email' placeholder='Email' /></div>
<div><input type='submit' value='Submit' /></div>
</form>
<!-- where the response will be displayed -->
<div id='response'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function(){
$('#userForm').submit(function(){
// show that something is loading
$('#response').html("<b>Loading response...</b>");
/*
* 'post_receiver.php' - where you will pass the form data
* $(this).serialize() - to easily read form data
* function(data){... - data contains the response from post_receiver.php
*/
$.post('post_receiver.php', $(this).serialize(), function(data){
// show the response
$('#response').html(data);
}).fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
</script>
</body>
</html>
POSTED DATA
<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>
3. JQUERY POST JSON DATA USING .POST() METHOD
Sometimes you don’t want to post data from an HTML form. You can do it by creating a JSON string, and here’s how you’ll be able to post it.
<html>
<head>
<title>jQuery post JSON data using .post() method by codeofaninja.com</title>
</head>
<body>
<h1>jQuery post JSON data using .post() method</h1>
<div>Click the button below to get response.</div>
<!-- our form -->
<input type='button' value='Post JSON' id='postJson' />
<!-- where the response will be displayed -->
<div id='response'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function(){
$('#postJson').click(function(){
// show that something is loading
$('#response').html("<b>Loading response...</b>");
/*
* 'post_receiver.php' - where you will pass the form data
* $(this).serialize() - to easily read form data
* function(data){... - data contains the response from post_receiver.php
*/
$.post('post_receiver.php', { user_id: "143", username: "ninjazhai", website: "https://demo.com/" }, function(data){
// show the response
$('#response').html(data);
}).fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
</script>
</body>
</html>
POSTED DATA
<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>
