嵌套的Ajax响应数据无法正常工作

时间:2016-04-01 01:21:59

标签: jquery ajax

我是javascript的初学者,我正在尝试计算两个邮政编码之间的距离。

我正在使用带有ajax get方法的REST api来获取后置代码的纬度和经度,然后将另一个ajax调用发送到以json格式返回距离的servlet。

现在我很难访问返回的json字符串。当我检查data变量中的内容时,我只发现第一次调用时返回的json元素。但是当我检查我的浏览器时,我发现两个成功返回的ajax,我可以看到第二个ajax的json字符串,它在浏览器控制台中返回了距离。

嵌套ajax返回

{"distance":"0.005011484329483577"} (found it from browser inspect element console)

我需要能够将距离值存储到变量中。我尝试使用data.distance。但它返回undefined。

可能是范围问题?

请帮助


    /* 
     * Nurul Alam
     * and open the template in the editor.
     */
    $(document).ready(function(){
        $('#PostCodeLookUp').submit(function(){
            var p = document.getElementById("postCode").value;
            $.ajax({
                url:'http://api.postcodes.io/postcodes/'+p,
                type:'GET',
                dataType:'json',
                //data:$('#updateUserName').serialize(),
                success:function(data){
                    if(data){
                        var lat = data.result.latitude;
                        var lng = data.result.longitude;
                        //send the data in a ajax call to a servlet which process the data and returns the distance
                        $.ajax({
                            url:'postCodeConverterServlet',
                            type:'POST',
                            dataType:'xml',
                            data:$.param({lat: lat, lng:lng}),
                            success:function(){
                              alert(data.distance);  
                            } 
                        });                                        
                        //
                        //$('#displayName').html(d);
                        //$('#displayName').slideDown(500);
                    }else{                    
                       $('#displayName').html("Problem");                    
                    } 
                }
            });
            return false;
        });
    });
    

1 个答案:

答案 0 :(得分:2)

在第二次ajax调用的成功函数中,您使用data从第一个再次访问返回。将您的第二个ajax成功函数更改为以下内容,为其自己的响应提供自己的参数名称,然后使用它。如果你愿意的话,你可以给论证一个更有意义的名字,但这样可行:

success:function(nestedData){
    alert(nestedData.distance);  
}