jQuery AJAX获取返回值

Question

我想获取HTML页面的“打印值”。

我尝试了下面的查询，但showGetResult（）只返回“空值”。

但是当我尝试这段代码时，我的Apache服务器日志中打印了我访问了index.php。

（index.php只打印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>

- osmund sadler

---

添加 async: false。 - Moaz Salem

Answer 1

这就是AJAX的工作方式（异步，正如它的名字所示）。showGetResult函数在AJAX调用完成之前就已经返回。因此，result被赋值为null，showGetResult将只返回null。

将依赖于AJAX调用结果的任何代码移动到success回调函数中。或者，你可以使调用同步，但这通常不是你想要的。

- James Allardice

Answer 2

我认为你想做的是这样的。

<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>

- Isaac Fife

---

有没有办法将它分配给一个变量？或者至少保持窗口更新？ - YJiqdAdwTifMxGR

@YJiqdAdwTifMxGR 这个问题我知道很老，但是我看到的唯一一个能够返回值并将其赋给变量的答案在这里：https://dev59.com/urb3oIgBc1ULPQZF1Rch#71544695 - m.arthur

Answer 3

AJAX请求默认是异步的；你不能在一个函数中返回它们的结果，你需要使用回调函数。实现你想要的最简单的方法是将处理数据的代码放在success处理程序中：

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

还有，不要使用 document.write。

- Alex Turpin

Answer 4

根据 jQuery.ajax 的文档，您的 dataType 错误了：

"html": 返回纯文本 HTML；插入 DOM 时包含的脚本标签会被执行。

因此您需要使用 html：

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

此外，正如其他人所说，ajax请求是异步的。因此，您需要重构您的代码。例如：

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');

- Justin Ethier

Answer 5

你在这里忽略了一个基本点。当你调用showGetResult时，success方法不会运行，而是异步运行。

在你放置return result;的时候，它仍然是空的（因为success尚未被调用）。

你需要做的是在成功被调用后执行document.write。可以像这样：

<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>

或者使用回调函数：

<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>

- Kato

Answer 6

与其在预期函数返回值上使用document.write，成功回调可以替你处理它，像这样：

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

- cchana

Answer 7

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

- Moaz Salem

---

虽然这段代码可能回答了问题，但提供关于为什么和/或如何回答问题的额外上下文可以提高其长期价值。 - Tân

因为如果 async 为 true，ajax 就无法在所需的时间内提供值。 - Moaz Salem