ajax jquery需要更多的点击

Question

我有两个php文件

1. say xyz.php

代码是:-

<?php

echo "hello";

?>

2.假设abc.php

代码是:-

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

    $("div.click_me").live('click',function(){


    $.ajax({

        type:"POST",
        data:null,
        url:"xyz.php",
        success:function(response){

        alert(response);    

        }

    })


    });



});




</script>


<div class="click_me"> CLICK </div>

只要单击div "click_me"，就会出现一个弹出框，表示“你好”。

但是，如果我将其代码更改为-，问题就在这里：

<script type="text/javascript">
$(document).ready(function(){

    $("div.click_me").live('click',function(){

        res=xxx();

        alert(res)

    });



});

function xxx(){


    $.ajax({

        type:"POST",
        data:null,
        url:"xyz.php",
        success:function(response){

            res=response;

        }

    })

    return res;

}


</script>

现在，我必须点击两次才能让弹出框中的“你好”。只要点击一次，什么都不会发生。我真的对这个愚蠢的问题感到困惑。请帮帮我。非常感谢。

Answer 1

Ajax是异步的。

success回调将res设置为response ，在 xxx返回res之后。这意味着这段代码第一次运行：

res = xxx();
alert(res);

res是undefined。

同时，阅读

解决方案:将回调函数传递给xxx

$('div.click_me').live('click',function()
{
    function alertCallback(x)
    {
        alert(x);
    }

    xxx(alertCallback);
});

function xxx(callback)
{
    $.post('xyz.php', null, function (result)
    {
        callback(result);
    });
}

Answer 2

在xxx()版本中，res不是在ajax调用之外定义的。因此，在第一次单击时，代码会出现“未知变量”错误(请检查JS控制台)。AJAX调用返回后，res将被设置为响应，在下一次单击时，返回将按预期工作。

Answer 3

通常，对于异步调用，您将使用回调(成功)。如果希望函数返回结果，请在Ajax options对象中使用以下内容：

async:false

我建议如下：

function xxx(callback){
    $.ajax({
        type:"POST",
        data:null,
        url:"xyz.php",
        success:function(response){
           callback(response);
        }
    })
    return res;
}