jQuery AJAX request demo

by Avizura

HTML

<a href="#" onclick="return getSuccessOutput();"> test success </a> | <a href="#" onclick="return getFailOutput(); return false;"> test failure</a>
<div id="output">waiting for action</div>

CSS

a {
    padding: 0.2em;
}
a:hover {
    background-color: #02AAEE;
}
#output {
    display: block;
    margin-top: 8px;
    padding: 1%;
    border: 1px solid #666;
    background-color: #efefef;
    
}

JavaScript

function buildFormData(formData, data, parentKey) {
  if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File)) {
    Object.keys(data).forEach(key => {
      buildFormData(formData, data[key], parentKey ? `${parentKey}[${key}]` : key);
    });
  } else {
    const value = data == null ? '' : data;

    formData.append(parentKey, value);
  }
}

function jsonToFormData(data) {
  const formData = new FormData();

  buildFormData(formData, data);

  return formData;
}


var item = {"id":3448,"main_theme_id":"181","skills_attributes":[{"id":40305,"name":"Asset Management","level":"sub_theme","theme_id":187,"experience":null,"_destroy":false},{"id":40306,"name":"Sales & Client Services","level":"focus","theme_id":455,"experience":null,"_destroy":false},{"id":40307,"name":"Portfolio Manager","level":"focus","theme_id":457,"experience":null,"_destroy":false},{"id":40308,"name":"Research & Business Analysis","level":"focus","theme_id":463,"experience":null,"_destroy":false},{"name":"Investor Relations","level":"focus","_destroy":false}],"experience":"Mid-Senior level (6 to 9 years)","salary":"Unpaid","currency":"GBP","edit_status":"completed","main_theme":{"id":181,"name":"Finance","level":"main_theme","on_moderation":false,"children":[187,189,190,192,194,197,200,186,199,191,198,195,196,335,188,336,389,233,954,989,639,640,641,857,437]},"work_places":[],"_destroy":false}
var form_data = jsonToFormData(item)
    
    $.ajax({
    url         : 'http://example.com/upload.php',
    data        : form_data,
    processData : false,
    contentType : false,
    type: 'POST'
}).done(function(data){
    // do stuff
});
// handles the click event, sends the query
function getSuccessOutput() {
    $.ajax({
        url:'/echo/js/?js=hello%20world!',
        complete: function (response) {
            $('#output').html(response.responseText);
        },
        error: function () {
            $('#output').html('Bummer: there was an error!');
      ...