jQuery Ajax get value via function?

Question

I have created a save(id) function that will submit ajax post request. When calling a save(id). How to get value/data from save(id) before going to next step. How to solve this?

For example:

        function save(id) {
            $.ajax({
                type: "POST",
                url: "/post/",
                dataType: "json",
                contentType: 'application/json',
                data: JSON.stringify({
                    id: id,
                }),
                success: function (data) {
                 return data;
                },
                error: function (error) {
                return data;
                }
            });
        }

Usage:

$('.btn-create').click(function () {
  var id = 123;
  data = saveArea(id); //get data from ajax request or error data?
  if (data) { 
     window.location = "/post/" + data.something
  }
}

Answer 1

Just make things a bit simpler.

For starters just add window.location = "/post/" + data.something to the success callback. Like this:

function save(id) {
    return $.ajax({
        type: "POST",
        url: "/post/",
        dataType: "json",
        contentType: 'application/json',
        data: JSON.stringify({
            id: id,
        }),
        success:function(data){
            window.location = "/post/" + data.something
        }
    }).responseText;
} 

Or by adding all your Ajax code within the click event.

$('.btn-create').click(function () {
   var id = "123";

   $.ajax({
    type: "POST",
    url: "/post/",
    dataType: "json",
    contentType: 'application/json',
    data: JSON.stringify({
        id: id,
    }),
    success: function (data) {
     window.location = "/post/" + data.something
    },
    error: function (error) {
      console.log(error)
    }
  });

}

Answer 2

You have two options, either run the AJAX call synchronously (not recommended). Or asynchronously using callbacks

Synchronous

As @Drew_Kennedy mentions, this will freeze the page until it's finished, degrading the user experience.

function save(id) {
    return $.ajax({
        type: "POST",
        url: "/post/",
        dataType: "json",
        contentType: 'application/json',
        async: false,
        data: JSON.stringify({
            id: id,
        })
    }).responseText;
}

$('.btn-create').click(function () {
  var id = 123;
  // now this will work
  data = save(id);
  if (data) { 
     window.location = "/post/" + data.something
  }
}

Asynchronous (recommended)

This will run in the background, and allow for normal user interaction on the page.

function save(id, cb, err) {
    $.ajax({
        type: "POST",
        url: "/post/",
        dataType: "json",
        contentType: 'application/json',
        data: JSON.stringify({
            id: id,
        }),
        success: function (data) {
            cb(data);
        },
        error: err // you can do the same for success/cb: "success: cb"
    });
}

$('.btn-create').click(function () {
  var id = 123;
  save(id, 
    // what to do on success
    function(data) { 
      // data is available here in the callback
      if (data) { 
          window.location = "/post/" + data.something
      }
    },
    // what to do on failure
    function(data) {
      alert(data);
    }
  });
}