Ajax with JSON

JavaScript Object Notation

A standard way to format data
JSON
{
totalPrice: 2196.00,
nights: 4,
location: 'Paris, France',
confirmation: '345feab'
}
HTML
<p>Your vacation to Paris,
France has been booked for
$2,196.00 for 4 nights.
Confirmation #345feab.</p>
Server decides how the
HTML is formatted
Server returns details,
we can use it as we wish
Our old code wouldnt work
application.js
This code is expecting HTML
to get returned, and injecting
the result right into the page.
var form = $(this);
success: function(result) {
event.preventDefault();
$('form').on('submit', function(event) {
$.ajax('/book', {
type: 'POST'
});
});
,
,
}
data: .serialize() form
form.remove();
$('#vacation').hide().html( ).fadeIn(); result
$.ajax with POST and JSON
Parse the response as JSON
Ask the server to respond with JSON
Result isnt HTML, well need to
create a DOM node here
,
contentType: 'application/json'
var form = $(this);
success: function(result) {
$.ajax('/book', {
type: 'POST'
});
,
,
}
data: .serialize() form
form.remove();
dataType: 'json',
$('#vacation').hide().html( ).fadeIn(); result
Reading the JSON results and creating HTML
JSON is converted into a
JavaScript Object
Create and add a DOM node
{
result
<p> </p>
success: function(result) {
}
form.remove();
var msg = $("<p></p>");
msg.append("Destination: " + result.location + ". ");
msg.append("Price: " + result.totalPrice + ". ");
msg.append("Nights: " + result.nights + ". ");
msg.append("Confirmation: " + result.confirmation+ ".");
$('#vacation').hide().html( ).fadeIn(); msg
confirmation: '345feab'
nights: 4,
totalPrice: 1196.00,
location: 'Paris',
}
Destination: Paris. Price: $2196.00. Nights: 4. Conrmation: 345feab.
Final event handler with POST and JSON
success: function(result) {
}
form.remove();
var msg = $("<p></p>");
msg.append("Destination: " + result.location + ". ");
msg.append("Price: " + result.totalPrice + ". ");
msg.append("Nights: " + result.nights + ". ");
msg.append("Confirmation: " + result.confirmation+ ".");
$('#vacation').hide().html( ).fadeIn(); msg
$.ajax('/book', {
});
$('form').on('submit', function(e) {
event.preventDefault();
var form = $(this);
type: 'POST',
contentType: 'application/json',
dataType: 'json',
data: form.serialize(),
,
contentType: 'application/json'
});
Dont Repeat Yourself
Form URL is in both HTML and JavaScript
<form action='/book' method='POST'>
...
</form>
application.js
index.html
$.ajax($('form').attr('action'),{
application.js
attr(<attribute>)
jQuery Object Methods
attr(<attribute>, <value>)
Will use the action from the form HTML
$.ajax('/book', { }) ...
... });
;
$('form').on('submit', function(e) {
event.preventDefault();
var form = $(this);
type: 'POST',
contentType: 'application/json',
dataType: 'json',
data: form.serialize(),

});
Final event handler with POST and JSON
success: function(result) {
}
form.remove();
var msg = $("<p></p>");
msg.append("Destination: " + result.location + ". ");
msg.append("Price: " + result.totalPrice + ". ");
msg.append("Nights: " + result.nights + ". ");
msg.append("Confirmation: " + result.confirmation+ ".");
$('#vacation').hide().html( ).fadeIn(); msg
});
$.ajax($('form').attr('action'),{