I can't get a return value from Ajax

Question

I have an HTML form that is used to send messages to a back end server. When the user clicks the send button, it triggers a javascript that makes an Ajax call to WordPress which in turn, makes an API call to the back end server to send the message. This part works flawlessly. The server then responds with a string which I want to return to the javascript to display in the form.

For some reason, I can't get the return value to javascript. I've stripped my function down to bare bones as follows:

function smsgte_admin_send() {
    check_ajax_referer('smsgte_nonce', 'security');    
    $response = admin_server_send(filter_input(INPUT_POST, 'message', FILTER_SANITIZE_STRING));

    $result = array (
        //'response' => $repsonse,
        'response' => 'just a response',
    );

    return $result;
}

The admin_server_send triggers the message being sent to the server. The message reaches the server, so that's working. I was questioning the response from the server, so I just populated my result array with a random string, but the javascript never receives the string.

The javascript code is:

function smsgteAdminSend(button) {
    var message = document.getElementById("smsgte_admin_message").value;

    jQuery(document).ready(function ($) {
        var data = {
            'action': 'smsgte_admin_send',
            'message': message,
            'security': smsgte_Ajax.ajax_nonce,
        };
        jQuery.post(smsgte_Ajax.ajaxurl, data, function (response, status) {

            document.getElementById("smsgte_admin_send_response").innerHTML = response.response;

        });
    });

}

Originally, I was sending the response as a string instead of a key/value pair, but that wasn't working either. Can't help think I'm missing something simple.

Answer 1

Returning the result array will only return to the PHP function calling it, instead you actually need to output it by echoing it, and in this case because it is an array, encoding it with JSON before outputting. So return $result becomes:

echo json_encode($result); exit;

and then add dataType to the javascript call so it can recognize the array data:

    var data = {
        'action': 'smsgte_admin_send',
        'message': message,
        'security': smsgte_Ajax.ajax_nonce,
        'dataType': 'json'
    };

See this answer for a more complete example: https://stackoverflow.com/a/8823995/5240159

Answer 2

The answer provided by @majick is the correct answer. I am posting this answer to show how I modified the code sample.

function smsgte_admin_send() {
    check_ajax_referer('smsgte_nonce', 'security');    
    $response = admin_server_send(filter_input(INPUT_POST, 'message', FILTER_SANITIZE_STRING));
    echo $response;
    wp_die();
}

The javascript code was changed to:

function smsgteAdminSend(button) {
    var message = document.getElementById("smsgte_admin_message").value;

    jQuery(document).ready(function ($) {
        var data = {
            'action': 'smsgte_admin_send',
            'message': message,
            'security': smsgte_Ajax.ajax_nonce,
        };
        jQuery.post(smsgte_Ajax.ajaxurl, data, function (response, status) {

            document.getElementById("smsgte_admin_send_response").innerHTML = response;

        });
    });

}

In the question, I was sending a key/value pair because I thought jQuery was expecting an object. Since what I needed to do was echo the response, the key/value pair was unnecessary and I simply echo'd the response string.