无法访问整个页面的JavaScript变量

Question

我正在获取JSON响应，并且使用该响应，我有两个值：

1. 空运成本。
2. 陆路运输成本。

我想将这两个值保存在客户端的某个位置，以便当用户选择一个单选按钮或另一个单选按钮时，将该值添加到页面上的另一个元素。

这是我在做什么：

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

$("#ddlCiudad").change(function () {
    var idCity = $("#ddlCiudad").val();
    $.getJSON("/ProductCheckout/GetPriceForLocation", { cityId: idCity, productId: idProduct, type: "land" },
        function (cityData) {
            console.log("Recieved json data."); //This part works. It outputs.

            var data = $.parseJSON(cityData);
            console.log("Parse JSON response."); //This part works. It outputs.

            landCost = data.LandCost;
            console.log("Assigned value of LandCost"); //FAILS HERE. nothing is shown. not even an error.
            airCost = data.AirCost;
            console.log("Assigned value of AirCost");

            alert(landCost);
            console.log("Alerted land!");
            alert(airCost);
            console.log("Alerted air!");
        }
    );
});

所以你有什么建议？ 我需要该JSON响应的值可在该页面上使用，如果我在change（）事件中声明该变量，它将超出范围。

{"DaysToShip":" TER = 48 Hrs / AER = 24 Hrs","LandCost":"25,00","AirCost":""}

Answer 1

尝试

landCost = cityData.LandCost;

Answer 2

如果确实必须使用全局变量，则可以将它们直接附加到window对象。

window.airCost = cityData.AirCost;

确实，尽管您希望在同一个作用域中处理json请求和“单选按钮”，所以您根本不会污染全局名称空间。

Answer 3

您对$.parseJSON()调用返回null因为传递给回调的数据已经解析为JSON。

var json = {LandCost:3, AirCost:5},
    results = $.parseJSON(json);

console.log(results); // results == null

Answer 4

如果要全局声明变量，则可以将它们放在jQuery闭包之外（ $(document).ready(function () {...}); ），或者不要使用var声明它们。 如果您不使用var关键字，则该变量将默认为全局变量。

这是不使用var关键字即可设置全局变量的jsfiddle： http : //jsfiddle.net/jasper/JWtbV/

Answer 5

您是否考虑过使用jQuery的$ .data（）函数将值直接附加到DOM中的body元素并从中访问它？

// Set Values
$('body').data('landCost', data.LandCost);
$('body').data('airCost', data.AirCost);

// Retrieve Values //
console.log($('body').data('landCost');
console.log($('body').data('airCost');

希望能帮助到你。