Javascript Simple Reusable Ajax function

Question

I' am trying to make a simple reusable ajax function. After spending hours on Google and and trying myself I have no option but to ask for help.

I' am getting "undefined" alert from the Javascript. It works fine when I don't use the function method. Below is the code for it...

    $("#formloginadmin").submit(function (){
        var url = "ajax/ajax_login_admin.php";
        var txtemail    = $("#txtemail").val();
        var txtpass     = $("#txtpass").val();
        var formdata    = $('#formloginadmin').serialize();
        var revel       = true;

        txtemail            = $.trim(txtemail);
        txtpass             = $.trim(txtpass);

        response            = ajax_post(url, formdata);
        alert(response);
        return false;
    });                                     

function ajax_post(url, formdata){
    $.post(url, formdata, function (data){
        return data;
    });
}

Is this your first ever ajax code or you have done some ajax calls before? — Ankur, Apr 30 '13 at 10:26
possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Felix Kling, Apr 30 '13 at 11:23
possible duplicate of [How to return AJAX response Text?](http://stackoverflow.com/questions/1225667/how-to-return-ajax-response-text) — Quentin, Apr 30 '13 at 13:03

score 0 · Accepted Answer · edited May 23 '17 at 11:43

Correct way is this

ajax_post(url, formdata).done(function(response) { alert(response); });

The way you are accessing the response of the ajax request is not correct. Look into this link: jQuery Ajax POST example with PHP

Hope you got the idea.

And for your question why you are getting undefined:

response = ajax_post(url, formdata); of yours is a ajax call and so the execution of next line alert(response); occurs before the return of that ajax call. Because the call ajax_post is asynchronous.

score 0 · Answer 2 · answered Apr 30 '13 at 11:19

function ajax_post(url, formdata){
    $.post(url, formdata, function (data){
        return data;
    });
}

This is a function which calls $.post inside. That $.post is an asynchronous function, meaning it won’t return its result but will notify you later that the result is there. That’s what the callback function does. In your callback function, the inner-most function, you get the data as the parameter and return it from the callback function.

So somewhere in the asynchronous timeline, there is a function that returns something to a function which is no longer executed. So this won’t work.

Asynchronous functions are made to return immediately and give you a notice of the result later. So you cannot return the data just like that in a synchronous matter. Instaed you really need to use the asynchronous pattern and use callbacks.

Alnitak · Answer 3 · 2013-04-30T12:03:09.467

As others have already said, $.post is asynchronous, meaning you can't get a return value from it.

What you can do, is return a promise to send back a return value later. Handily, the return value of $.post is just such a promise:

function ajax_post(url, formdata){
    return $.post(url, formdata);
}

(Note however that you now have a function that does nothing but call $.post with those same parameters!)

Once you've got the promise you can then trigger a callback when that promise is resolved:

ajax_post(url, formdata).done(function(response) {
    alert(response);
});

Javascript Simple Reusable Ajax function

3 Answers3