Jquery set HTML via ajax

Question

I have the following span:

<span class='username'> </span>

to populate this i have to get a value from PHP therefor i use Ajax:

    $('.username').html(getUsername()); 
    function getUsername(){
    $.ajax({
        type: 'POST',
        url: myBaseUrl + 'Profiles/ajax_getUsername',
        dataType: 'json',
        data: {

        },
        success: function(data){
            document.write(data);
        }
    })
}

Now when i debug i see that the returned data (data) is the correct value but the html between the span tags stay the same.

What am i doing wrong?

Little update

I have tried the following:

    function getUsername(){
    $.ajax({
        type: 'POST',
        url: myBaseUrl + 'Profiles/ajax_getUsername',
        dataType: 'json',
        data: {

        },
        success: function(data){
            $('.username').html('RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRr');
        }
    })
}

getUsername();

Still there is no html between the tags (no text) but when i look at the console the method is completed and has been executed.

Answer to the little update

The error was in my Ajax function i forgot to print the actual response! Thank you for all of your answers, for those of you who are searching for this question here is my Ajax function:

    public function ajax_getUsername(){
    if ($this->RequestHandler->isAjax())
    {
        $this->autoLayout = false;
        $this->autoRender = false;
        $this->layout = 'ajax';
    }
    print json_encode($this->currentClient['username']);

}

Do note that i am using CakePHP which is why there are some buildin methods. All in all just remember print json_encode($this->currentClient['username']);

Answer 1

The logic flow of your code is not quite correct. An asynchronous function cannot return anything as execution will have moved to the next statement by the time the response is received. Instead, all processing required on the response must be done in the success handler. Try this:

function getUsername() {
    $.ajax({
        type: 'POST',
        url: myBaseUrl + 'Profiles/ajax_getUsername',
        dataType: 'json',
        data: { },
        success: function(data){
            $('.username').html(data); // update the HTML here
        }
    })
}

getUsername();