i want to get the 'printed value' of html pages.

i tried below query, but showGetResult() just return 'null value'

but my apache server logs printed i accessed index.php when i try this code.

(index.php just print helloworld)

<script type="text/javascript" src=".js"><\script>
<script type="text/javascript">
function showGetResult( name )
{
     var result = null;
     jQuery.ajax({
        url: 'http://localhost/index.php',
        type: 'get',
        dataType: 'text/html',
        success:function(data)
        {
            alert(data);
            result = data;
        } 
     });
     return result;
}

document.write(showGetResult('test'));
</script>

i want to get the 'printed value' of html pages.

i tried below query, but showGetResult() just return 'null value'

but my apache server logs printed i accessed index.php when i try this code.

(index.php just print helloworld)

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"><\script>
<script type="text/javascript">
function showGetResult( name )
{
     var result = null;
     jQuery.ajax({
        url: 'http://localhost/index.php',
        type: 'get',
        dataType: 'text/html',
        success:function(data)
        {
            alert(data);
            result = data;
        } 
     });
     return result;
}

document.write(showGetResult('test'));
</script>

• javascript
• jquery
• ajax

• add async: false, – Moaz Salem Commented Nov 29, 2019 at 3:49

7 Answers 7

This is the way AJAX works (asynchronously, like the name suggests). The showGetResult function returns before the AJAX call completes. showGetResult will therefore simply return null since that's what you've assigned to result.

Move any code that depends on the result of the AJAX call inside the success callback. Alternatively, you could make the call synchronous, but that's not usually what you want.

I think what you want to do is this.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"><\script>
<script type="text/javascript">
function showGetResult( name )
{
     jQuery.ajax({
        url: 'http://localhost/index.php',
        type: 'get',
        dataType: 'text/html',
        success:function(data)
        {
            alert(data);
            document.write(data);
        } 
     });
}

showGetResult('test');
</script>

AJAX requests are aynchronous by default; you can't return their result in a function, you need to use callbacks. The easiest way to achieve what you want is to put your code that handles your data in your success handler:

    success:function(data)
    {
        alert(data);
        result = data;
        document.write(showGetResult('test'));
    } 

Also, don't use document.write.

You have the wrong dataType per the documentation for jQuery.ajax:

"html": Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.

So you want to use html:

...
dataType: 'html',
...

function showGetResult( name )
{
 var result = null;
 jQuery.ajax({
    url: 'http://localhost/index.php',
    type: 'get',
    dataType: 'html',
    success:function(data)
    {
        alert(data);
        result = data;
        document.write(result);
    } 
 });
}

showGetResult('test');

You're missing a fundamental point here. The success method is not run when you call showGetResult. It is run asynchronously.

At the point that you put return result; it is still null (because success has not yet been invoked).

What you need to do is have document.write execute after success is invoked. Either like this:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"><\script>
<script type="text/javascript">
function showGetResult( name )
{
     var result = null;
     jQuery.ajax({
        url: 'http://localhost/index.php',
        type: 'get',
        dataType: 'text/html',
        success:function(data)
        {
            alert(data);
            document.write(data);
        } 
     });
     return result;
}

//document.write(showGetResult('test'));
showGetResult('test');
</script>

Or with a callback:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"><\script>
<script type="text/javascript">
function showGetResult( name )
{
     var result = null;
     jQuery.ajax({
        url: 'http://localhost/index.php',
        type: 'get',
        dataType: 'text/html',
        success:function(data)
        {
            alert(data);
            writeToDocument(data);
        } 
     });
}

function writeToDocument(data) {
   document.write(data);
}

showGetResult('test');
</script>

Rather than using document.write on what you expect the function to return, the success callback can take care of that for you, like so:

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

jQuery.ajax({
async: false, //add async false
        url: 'http://localhost/index.php',
        type: 'get',
        dataType: 'text/html',
        success:function(data)
        {
            alert(data);
            result = data;
        } 
     });