javascript - jQuery Ajax POST example with PHP -

i trying send data form database. here form using:

<form name="foo" action="form.php" method="post" id="foo">     <label for="bar">a bar</label>     <input id="bar" name="bar" type="text" value="" />     <input type="submit" value="send" /> </form> 

the typical approach submit form, causes browser redirect. using jquery , ajax, possible capture of form's data , submit php script (in example, form.php)?

basic usage of .ajax this:

html:

<form id="foo">     <label for="bar">a bar</label>     <input id="bar" name="bar" type="text" value="" />      <input type="submit" value="send" /> </form> 

jquery:

// variable hold request var request;  // bind submit event of our form $("#foo").submit(function(event){      // prevent default posting of form - put here work in case of errors     event.preventdefault();      // abort pending request     if (request) {         request.abort();     }     // setup local variables     var $form = $(this);      // let's select , cache fields     var $inputs = $form.find("input, select, button, textarea");      // serialize data in form     var serializeddata = $form.serialize();      // let's disable inputs duration of ajax request.     // note: disable elements after form data has been serialized.     // disabled form elements not serialized.     $inputs.prop("disabled", true);      // fire off request /form.php     request = $.ajax({         url: "/form.php",         type: "post",         data: serializeddata     });      // callback handler called on success     request.done(function (response, textstatus, jqxhr){         // log message console         console.log("hooray, worked!");     });      // callback handler called on failure     request.fail(function (jqxhr, textstatus, errorthrown){         // log error console         console.error(             "the following error occurred: "+             textstatus, errorthrown         );     });      // callback handler called regardless     // if request failed or succeeded     request.always(function () {         // reenable inputs         $inputs.prop("disabled", false);     });  }); 

note: since jquery 1.8, .success(), .error() , .complete() deprecated in favor of .done(), .fail() , .always().

note: remember above snippet has done after dom ready, should put inside $(document).ready() handler (or use $() shorthand).

tip: can chain callback handlers this: $.ajax().done().fail().always();

php (that is, form.php):

// can access values posted jquery.ajax // through global variable $_post, this: $bar = isset($_post['bar']) ? $_post['bar'] : null; 

note: sanitize posted data, prevent injections , other malicious code.

you use shorthand .post in place of .ajax in above javascript code:

$.post('/form.php', serializeddata, function(response) {     // log response console     console.log("response: "+response); }); 

note: above javascript code made work jquery 1.8 , later, should work previous versions down jquery 1.5.