Question

I have created a function called save , when i call save function, I am getting success undefined or object Object

UPDATES:
updated to get he values jqxhr object that ajax returns

function save() {
 return   $.ajax({
        type: "POST",
        url: "foo.json",
        data: json_data,
        contentType: 'application/json',
        success: function (data, textStatus, xhr) {

            $('<div id="loading">Loading...</div>').insertBefore('#form');

        },

        error: function (jqXHR, textStatus, errorThrown) {


        }
    });


}


$(document).ready(function () {

$(function () {
 $("#save").click(function () {
     var jqxhr = save();
     alert("success " + jqxhr.success);
     alert("status " + jqxhr.status);
     alert("status " + jqxhr.readyState);
 });
});


 });

Answer 1

Ninja edit by OP
First of all, there is no return statement within your save function, so it works as expected by returning undefined value.

Secondly, it won’t work that way. You need to return the $.ajax call (which itself, returns a jqXHR object, where you can hook in and setup code for different events. Afterall, by default an Ajax request runs asyncronously.

in save()

return $.ajax({ ...

and later…

save().done(function( retValue ) {
    alert('success ' + retValue);
});

Learn more about jQuerys Ajax and Deferred objects here and here.