javascript - What is the difference between attaching a listener to a button to send form data with AJAX and using a standard HTML form? -

namely, differences between these 2 approaches:

1. ajax

i have random input fields not in form container (html). in js file, have listener button (not attached or related input fields in way) pulls values using jquery , use $.post(url, postparams, callback(...) {...} ); post data.

2. html

i put input fields within context of form tag , add submit input action points corresponding route (this corresponds url in ajax/jquery method above).

what's catch? option 1 submit form without requiring page refresh while option 2 will?

yes, method nr 1 allow submit form without refreshing entire page.

it's best combine 2 using "progressive enhancement". means start basic approach make sure works across board, , spice things - have capability better user experience.

take example:

<form action="somescript.aspx" method="post" class="ajax"> <label for="something">something</label> <input type="text" name="something" id="something" /> <input type="submit" value="submit form" /> </form> 

this pretty basic, standard html form works in devices , should able use successfully, using assistive technologies , not.

then add simple js script "hi-jacks" default functionality of form , adds ajax have js:

<script>   $('form.ajax').submit(function() {       var form = $(this);       $.post(form.attr('action'), form.serialize(), function(result) {           // response       });       return false;   }); </script>