ajax jquery需要点击一下

时间:2011-08-05 20:48:40

标签: jquery ajax click

我有两个php文件,

  1. 说xyz.php
  2. 代码是: -

    <?php
    
    echo "hello";
    
    ?>
    

    2.say 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”,就会出现一个弹出框,表示“hello”符合预期。

    但如果我将代码更改为 - :

    ,问题就出在这里
    <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>
    

    现在我必须点击两次才能获得弹出“你好”的弹出框。点击一次没有任何反应。我对这个愚蠢的问题感到很困惑。请帮助我。 Thanx很多。

6 个答案:

答案 0 :(得分:4)

Ajax是异步的。

success返回res后,response回调设置为xxxres 。这意味着第一次运行此代码:

res = xxx();
alert(res);

resundefined

另请阅读the var statement.


解决方案:将回调函数传递给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);
    });
}

答案 1 :(得分:1)

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

答案 2 :(得分:1)

通常使用异步调用,您将使用回调(成功)。如果希望函数返回结果,请在Ajax选项对象中使用以下命令:

async:false

我会推荐以下内容:

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

答案 3 :(得分:0)

ajax是异步所以

return res;

在设置之前被调用

答案 4 :(得分:0)

AJAX是异步的(这是第一个A)。这意味着不会立即返回结果。返回对请求的响应时将触发success函数。您无法从函数返回此响应,因为它在您的函数完成执行时尚未进入。

如果您必须阻止并等待响应,则可以将async参数设置为false。这将强制呼叫等待响应。这通常是一个坏主意,所以你可能想要考虑是否有某种方法可以使用异步行为获得相同的功能。使用async: false会在浏览器等待响应时挂起浏览器。如果这个响应需要一些时间才能回来,那么在大多数情况下这将是一个非常糟糕的用户体验。

答案 5 :(得分:0)

Guyx,他的代码有什么问题。我的意思是,成功调用bac应该在$ .ajax结束后执行,但在返回'res'之前。例如,在下面的代码中,它在警告“xyz”之前警告“abc”。

$(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;
            alert("abc");
        }
    })
    alert("xyz");
    return res;
}