JQuery ajax form post techniques

Here is the standard ajax form post code:

$.ajax({

type: “POST”,

url: “some.php”,

data: { name: “John”, location: “Boston” }

}).done(function( msg ) {

alert( “Data Saved: ” + msg );

});

 

Here is a sweet ajax form submit with fading confirmations

While developing, you might run into the problem where you made some changes, but the browser isn’t running the new code. That is cause by caching. For a final release, you wouldn’t want to make the user have to re load all the scripts and data every time, but during development, you need to keep changing and accessing the latest scripts. There a few things you could do. Try CTR + F5 to do a refresh of the browser and cache. 

Here is a new chunk to add to this if needed to prevent caching in internet explorer. Add cache: false to the ajax method. Add a random variable to the query string. Begin to use POST from now on to prevent this.

var random = Math.floor((Math.random()*1000)+1);

$(“#submit_personalinfo_button”).click(function(d){
d.preventDefault();
$(“#area1”).fadeOut(1000);
setTimeout(function(){
$.ajax( {
type: “GET”,
url: $(“#svc_letsdolunch_personalinfoform”).attr( ‘action’ ),
cache: false,
data: $(“#svc_letsdolunch_personalinfoform”).serialize(),
success: function( response ) {
$(“#area1”).html( response ).fadeIn(1000).delay(3000).fadeOut(1000);
}
} ); }, 1000);

});

 

What about if there was an error, like the server times out, you have a typo or error in your script, or the internet is not connected. There is a way to check for these. But you have to alter the ajax call so it becomes an object that you can use.

var myajaxrequest = $.ajax({type: “POST”,   url: “mysweetscripts.php”,   data: { what: what} });

now we can call more methods on this object as so…

myajaxrequest.done(function( msg ) {alert(‘done!’)});

myajaxrequest.success(function( msg ) {alert(success!’)});<— note that this is used the same as .done(); Don’t need to use both of these in the call.

myajaxrequest.fail(function( jqXHR, textStatus, errorThrown) {
alert(‘request failed error textStatus: ‘ + textStatus + ‘…Error thrown: ‘ + errorThrown);

)});

I haven’t found a use yet for the jqXHR object, but the textStatus will hold arguments (besides null) are "timeout", "error", "abort", and "parsererror". I could check these and decide what to do in each situation. When an HTTP error occurs, errorThrown receives the textual portion of the HTTP status, such as “Not Found” or “Internal Server Error.” This could be useful in development, to see if there is an error in your script.

Here is some exciting stuff to look into when checking for stuff with ajax,

ifModified
Allow the request to be successful only if the response has changed since the last request. This is done by checking the Last-Modified header. Default value is false, ignoring the header. In jQuery 1.4 this technique also checks the ‘etag’ specified by the server to catch unmodified data.

 

 $("#myform").find('select:first').change( function() {     $.ajax( {       type: "POST",       url: $("#myform").attr( 'action' ),       data: $("#myform").serialize(),       success: function( response ) {         console.log( response );       }     } );   } );

THE FORMDATA OBJECT

One of the enhancements to XMLHttpRequest is the introduction of the FormData object. With the FormData object, you can create and send a set of key/value pairs and, optionally, files using XMLHttpRequest. When using this technique, the data is sent in the same format as if you’d submitted it via the form’s submit() method with the encoding type of multipart/form-data.

FormData gives you a way to create HTML forms on-the-fly using JavaScript, and then submit them using XMLHttpRequest.send().  This is how the bad guys are making those bots that submit directly to my form actions, and trying to mess with my database. Here’s a simple example:

var formData = new FormData();
formData.append(“part_num”, “123ABC”);
formData.append(“part_price”, 7.95);
formData.append(“part_image”, somefile)

var xhr = new XMLHttpRequest();
xhr.open(“POST”, “http://some.url/”);
xhr.send(formData);