AJAX全球变量

时间:2012-05-12 23:05:15

标签: jquery global-variables

我正在尝试这样做,返回'undefined':

$.ajax({
    url : 'curriculum/read_types',
    type : 'GET',
    dataType : 'JSON',
    success : function(data) {
        return data;
    }
})

但如果我这样做:

$.ajax({
    url : 'curriculum/read_types',
    type : 'GET',
    dataType : 'JSON',
    success : function(data) {
        console.log(data);
    }
})

它在控制台上写了一个完整的JSON对象,所以我知道存在数据。

如何返回此数据?


我想做的是下一步:

var curriculum = {
add : function() {
    html = [];

    html.push('<select name="type" required>');
    html.push('<option value="0">Grupo general...</option>');

    var types = curriculum.read_types();
    $.each(types, function(k,v) {
        html.push('<option value="'+v+'">'+v+'</option>')
    })

    html.push('</select>');

    content.show('Añadir imagen a curriculum',html.join(''));
},
read_types : function() {
    $.getJSON('curriculum/read_types', function(data) {
        return data;
    })
}
}

curriculun.add()

最后它管理但是使用了asyn:false请求:

var curriculum = {
add : function() {
    html = [];
    html.push('<select name="type" required>');
    html.push('<option value="0">Grupo general...</option>');

    var types = curriculum.read_types();
    $.each(types, function(k,v) {
        html.push('<option value="'+v+'">'+v+'</option>')
    })


    html.push('</select>')
    content.show('Añadir imagen a curriculum',html.join(''));
},
read_types : function() {
    var a;
    $.ajax({
        url : 'curriculum/read_types',
        type : 'GET',
        async : false,
        contentType : 'JSON',
        success : function(data) {
            a = data;
        }
    })
    return a;
}
}

3 个答案:

答案 0 :(得分:5)

回调函数(如成功处理程序)是已注册的异步事件,一旦AJAX请求完成就会触发,并将成功结果返回给客户端浏览器。由于事件已注册,因此它不会阻止您运行AJAX请求的功能。

为了处理数据,只需将数据移交给另一个函数,如下所示:

$.ajax({
    url : 'curriculum/read_types',
    type : 'GET',
    dataType : 'JSON',
    success : function(data) {
        console.log(data):

        // process the results
        processData(data);
    }
});


function processData(data) {
    // do stuff with the data here
}

<强>更新

read_types : function() {
    $.getJSON('curriculum/read_types', function(data) {
        return data;
    });
}

以上代码只是你不能做的事情。以下是对流程的简要描述:

  
      
  • read_types函数是从其他进程调用的。

  •   
  • 使用2个参数调用$ .getJSON函数:path和callback handler。

  •   
  • read_types函数完成处理并到达终点。

  •   
  • 接下来,当read_types方法正在完成时,getJSON函数会向您的URL发出HTTP GET请求。
  •   
  • 数据在响应中接收,并作为分配给参数“data”的参数传递给回调处理程序。
  •   
  • 当您调用return data;时,您将数据返回到匿名成功回调函数,而不是read_types。因此,return语句基本上什么都不做。
  •   

同步请求示例:

现在,说到这一点,您可以向服务器发出同步请求,但由于它对视图的影响,强烈建议不要这样做。

但是,这是一个例子,仅用于学术目的。除非你真的真的知道你在做什么,否则我绝不会主张使用这个策略:

注意:除非您知道自己在做什么,否则不得在制作中使用

function getData() {

    var myDataObj = null;

    // this will BLOCK execution of all other scripts on the page until
     // the data is received!
    $.ajax({
        url : 'curriculum/read_types',
        type : 'GET',
        dataType : 'JSON',
        success : function(data) {
            console.log(data):

            // we can assign this data to myDataObj in synchronous requests
            myDataObj = data;

        },
        async: false  /** Make a synchronous request **/
    });

    // Since we BLOCKED, this object is not null. If we used async: true 
     // (the default) then this would return null.
    return myDataObj;
}

答案 1 :(得分:4)

如前所述,ajax是异步的。你可以传递async false来强制javascript线程等待,但这只是讨厌而且非常类似于javascript。 我认为这是你想要的:

var myData;
$.ajax({
    url : 'curriculum/read_types',
    type : 'GET',
    async : false,
    dataType : 'JSON',
    success : function(data) {
        myData = data;
    }
})

// while this is what you want to do, myData would be undefined here
console.log(myData);

但你应该继续做你在成功函数中所做的事情。

答案 2 :(得分:1)

Ajax是异步的,所以返回它并不好。您可以使用自定义事件。在成功函数中:

$('#someelement').trigger('read_types_loaded', [data]);

然后在某处附加一个事件监听器:

$('#someelement').bind('read_types_loaded', function(event,data){
    // Do something with data
});