Now we have control of the submit process all we have to do is arrange for the form's data to be sent to the server but first we have to encode it appropriately because this is no longer done for us. The simplest way to do this is to use the jQuery serialize data method:

var sendData=$(this).serialize();

We use this in the submit event handler because it is set to the element that originated the event.

Putting all this together gives:

$("#myForm").submit(
  function(event){
   event.preventDefault();
   var sendData=$(this).serialize();
   $.post("process.php", sendData).done(
       function (data) {
        console.log(data);
       });
  });

Notice that now the data returned by the server doesn't replace the current page and in this case it is simply printed to the console. 

A get works in exactly the same way and the server side code doesn't need to be modified from its basic form handling to cope with data sent by Ajax rather than the default submit. 

The only difference is that the data returned doesn't replace the page. 

What advantage does this have?

The answer to this question ranges from something sophisticated, e.g. because you are writing a single page application, to the fairly obvious, e.g. because you don't want the page context to change because of a form submit.

For example, you could check that the form contains valid data before posting it to the server and if not the form wouldn't be cleared by the page that overwrites it. In other words, the user's context, i.e. any data they may have entered, remains unaltered by the submit. 

It is also the case that submitting data using Ajax means that the user isn't subjected to the loading of a new page.

Where Next?

We now know how to get data from the server and send it using both get and post. What more could there be?

There are some lower level Ajax methods that are worth knowing about that let you tailor the interaction more finely than the easy to use get and post methods. 

You also need to deal with the problems posed by headers, MIME types, character codings and caching. 

All of these topics will cause you problems  sooner or later, even if you stick to the very basic get and post method, unless you master them. 

Summary

• The jQuery command $.post(url) sends data to the url specified. The url usually corresponds to a program that will process the data but it also sends a new HTML page back to the client. 
•  A post usually sends data to the server in the body of the request and jQuery lets you specify this data a the second parameter.
• The simplest format to use is to send key value pairs which jQuery will extract from an object you supply. 
• The server side system you use that provides the data processing facilities and hence these are going to vary according to what you use. 
• When you send data to the server with get the data are encoded as the query string as part of the URL. 
• If you want to manually URL encode some data use JavaScript's urlencode function or jQuery's param() function. 
• In a form-based data submission the file specified as the action is returned to the client as an HTML page and it replaces the page that made the request. 
• If you send the form data using Ajax then the Ajax done method receives the response and can do with it what it likes. The page that makes the request is not replaced by the response. 

 

Just jQuery
Events, Async & AJAX

Is now available as a print book: Amazon 

 

Contents

1. Events, Async & Ajax (Book Only)
2. Reinventing Events
3. Working With Events
4. Asynchronous Code
5. Consuming Promises
6. Using Promises 
7. WebWorkers
8. Ajax the Basics - get
9. Ajax the Basics -  post
10. Ajax - Advanced Ajax To The Server
11. Ajax - Advanced Ajax To The Client
12. Ajax - Advanced Ajax Transports And JSONP
13. Ajax - Advanced Ajax The jsXHR Object
14. Ajax - Advanced Ajax Character Coding And Encoding 

Also Available:

buy from Amazon

 

Advanced Attributes

 

JavaScript Canvas - Fetch API Working with lower-level data is very much part of graphics. This extract from Ian Elliot's book on JavaScript Graphics looks at how to use typed arrays to access graphic data. + Full Story

JavaScript Jems - The Inheritance Tax JavaScript should not be judged as if it was a poor version of the other popular languages - it isn't a Java or a C++ clone. It does things its own way.  In particular, it doesn't do inheritance  [ ... ] + Full Story

Other Articles JavaScript Jems - Objects Are Anonymous Singletons JavaScript Canvas - Typed Arrays JavaScript Jems - Functions Are Objects Just jQuery The Core UI - Data JavaScript Jems - Lambda Expressions Just jQuery The Core UI - Easy Plugins JavaScript Async - Basic Worker Just jQuery The Core UI - Animation

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

 

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info