jqueryajax和传递返回的数据

jqueryajax和传递返回的数据,jquery,ajax,Jquery,Ajax,我有下面的代码 这一切都是可行的,但我在将请求的数据传递给另一个变量时遇到了问题 At警报(项目)它具有所需的数据,但我无法将其传递给警报(personen) 我知道这与此有关,因为请求,警报(personen)目前无法提供必要的数据已执行,但我不知道如何以一种体面的方式修复此问题 function getItems(type){ var items; $.post('url' + type + '_ophalen', {}, function(data){

我有下面的代码

这一切都是可行的,但我在将请求的数据传递给另一个变量时遇到了问题

At
警报(项目)它具有所需的数据,但我无法将其传递给
警报(personen)

我知道这与此有关,因为请求,
警报(personen)目前无法提供必要的数据已执行,但我不知道如何以一种体面的方式修复此问题

function getItems(type){
    var items;
    $.post('url' + type + '_ophalen', {},
    function(data){ 
        items = jQuery.parseJSON(data);
    });

    $(this).ajaxComplete(function() {
    alert(items);
        return items;
    });
}


var personen = getItems('persoon');
alert(personen);

如果要查看数据是否存在,应在$.post回调函数中执行

$.post('url' + type + '_ophalen', {},
    function(data){ // callback func
        items = jQuery.parseJSON(data);
        console.log(items);
        alert(items); // use both to see the power of console.log() ;)
    });
对于jQuery 另外,如果服务器只发送了带有
pain/text
或`application/JSON

问题的JSON(作为字符串),我认为您不必使用$.parseJSON 这就是问题所在:

var personen = getItems('persoon');
alert(personen);
您的函数
getItems()
内部具有异步功能,这意味着它以以下方式执行:

  • 你管它叫什么
  • 然后它异步发布某些内容并继续执行(不等待结果)
  • 它设置一个
    ajaxComplete
    功能并继续执行
  • 它回来了
  • 因此,函数基本上不返回任何内容,因为它在内部异步调用完成之前就完成了执行。它没有任何返回语句来返回任何内容

    这就是为什么它还解释了第一个警报不显示任何内容而第二个警报显示您的项目的行为。尽管您可能认为应该先显示数据,然后再显示空数据(在函数完成执行后)。这也可能会让你感到困惑

    function() {
        alert(items);
        return items;
    }
    
    返回项目
    是此处显示的匿名函数的返回,而不是您可能认为的
    getItems()
    函数的返回

    未推荐的解决方案-同步调用 在您的情况下,如果希望从
    getItems()
    函数返回数据,则应该使用同步调用。但是您只能通过使用
    $.ajax()
    来实现这一点,因为它支持
    async:false

    推荐解决方案 虽然可以进行同步调用,但我建议您使用异步调用。事情可以做得不同,但如果使用异步调用,将提供更好的体验。如果Ajax应用程序是事件驱动的,而不是程序化的,那么它们会更好

    如果需要函数外部可用的数据,您可以定义函数外部可用的闭包变量(也可以是全局变量,但这通常不是一个好主意)

    // creating a closure
    (function(){
    
        // closure-global variable
        var personen = {
            data: null,
            available: false;
        };
    
        function getItems(type){
            $.post('url' + type + '_ophalen', {}, function(data) { 
                personen.data = jQuery.parseJSON(data);
                personen.available = true;
            });
        }
    
        getItems('persoon');
    
        // do other stuff in event-driven way
        // like when a user clicks something
    
        $("#SomeButtonOrLink").click(function(e){
            e.preventDefault();
            if (personen.available)
            {
                // do some processing
            }
            else
            {
                alert("Data not laoded.");
            }
        });
    })();
    

    所以基本上这段代码是事件驱动的。我不知道项目加载应该在什么时候发生,但它也应该与某个事件相关(可能是页面加载或用户做了什么)。所以一切都是由事件驱动的。加载项目(如果我们说它们应该在页面加载时加载),完成后,您不必处理任何内容,直到用户执行某项操作(在上面的场景中,它是某个按钮或链接的单击事件)。这是事件驱动的执行。

    alert()是一个非常无用的调试工具。您应该在chrome中使用FireBug(FF插件)或内置开发工具。只需尝试console.log(项目);改为pof警报(项目);这只是一个快速测试,看看数据是否存在。这不像是有错误。
    getItems
    将永远不会返回
    items
    。行
    返回项目
    位于传递给
    ajaxComplete
    complete方法的匿名函数中。请参阅@V-Light的答案。同样的问题也在讨论中。数据就在那里,我不需要其他方法来检查。我需要获取该函数之外的数据。那么事件驱动的方法会是什么样子?@Dazz:它将由事件控制。在您的情况下,它将由获取数据的事件驱动。因为在获得数据后,您将能够处理您需要的任何内容。在你拥有它之前,你没有太多的事情要做,所以最好不要处理任何事情。异步匿名函数将在某些事件发生时执行。在正确的时间-在接收数据的时候。@Dazz:检查我更新的答案,在那里我添加了一些事件驱动的代码和真实场景。
    // creating a closure
    (function(){
    
        // closure-global variable
        var personen = {
            data: null,
            available: false;
        };
    
        function getItems(type){
            $.post('url' + type + '_ophalen', {}, function(data) { 
                personen.data = jQuery.parseJSON(data);
                personen.available = true;
            });
        }
    
        getItems('persoon');
    
        // do other stuff in event-driven way
        // like when a user clicks something
    
        $("#SomeButtonOrLink").click(function(e){
            e.preventDefault();
            if (personen.available)
            {
                // do some processing
            }
            else
            {
                alert("Data not laoded.");
            }
        });
    })();