Getting Started With jQuery - Ajax Post
Written by Ian Elliot   
Monday, 14 September 2015
Article Index
Getting Started With jQuery - Ajax Post
Get
Where Next & Summary

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. 

 

 

justjquery

 

 

Now Available as a Print Book: 

 

smallcoverjQuery

You can buy it from:

USA and World     Amazon.com
Canada            Amazon.ca

UK                Amazon.co.uk
France            Amazon.fr
Germany           Amazon.de
Spain             Amazon.es
Italy             Amazon.it
India             Amazon.in
Japan             Amazon.jp

 

The Core UI

  1. Understanding jQuery (Book Only)
  2. The DOM And Selectors
  3. CSS Selectors
  4. The jQuery Object (Book Only)
  5. Filters
  6. Advanced Filters - Traversing The DOM
  7. Modifying DOM Objects
  8. Creating And Modifying The DOM
  9. jQuery Data
  10. Forms
  11. Function Queues
  12. Animation
  13. jQuery UI
  14. jQuery UI Custom Control - Widget Factory
  15. jQuery - Easy Plugins
  16. Getting Started With QUnit Testing

Now Available as a Print Book:

 

jquery2coverYou can buy it from:

USA and World   Amazon.com
Canada          Amazon.ca
UK              Amazon.co.uk
France          Amazon.fr
Germany         Amazon.de
Spain           Amazon.es
Italy           Amazon.it
India           Amazon.in
Japan          
Amazon.jp

 

 

 

Events, Async & AJAX

  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 

 

Banner


JavaScript Async - Cache

The cache API is closely associated with Progressive Web Apps but it can be used in any JavaScript program to good effect. This  extract from my recently published book JavaScript Async: Events C [ ... ]



Javascript Jems - Self Modifying Code

Javascript, being an interpreted language, can modify its own code as it runs. Self-modifying code can be dangerous but you should know about it and how it works. If you would like to experiment,  [ ... ]


Other Articles

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.

Python

 



 

Comments




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



Last Updated ( Friday, 28 September 2018 )