javascript - 从json文件获取数据并使用jquery/ajax显示值

Question

以下函数应显示一条警报消息，其中包含从 JSON 文件获取的值。

function ajaxTest() {
    let currencyRate = "";

    $.ajax({
        url: "http://free.currencyconverterapi.com/api/v5/convert?q=USD_INR&compact=y",
        dataType: "jsonp",
        success: function(json) {
            let myObject = JSON.parse(json);
            currencyRate += myObject.USD_INR.val;
        }
    })

    alert(currencyRate);
}

json 文件如下所示。

{"USD_INR":{"val":72.037972}}

该代码不起作用。它显示一个空白警报框，因此 ajax 部分不正确。

Answer 1

这是一个异步函数调用，您需要在ajax成功函数中添加警报

function ajaxTest() {
    let currencyRate = "";

    $.ajax({
        url: "http://free.currencyconverterapi.com/api/v5/convert?q=USD_INR&compact=y",
        dataType: "jsonp",
        success: function(json) {
            let myObject = JSON.parse(json);
            currencyRate += myObject.USD_INR.val;

            // put alert here
            alert(currencyRate);
        }
    })
}

或者更好的方法如下所示。

ajaxTest().then(function( json ) {
   let myObject = JSON.parse(json);
   currencyRate += myObject.USD_INR.val;

   // put alert here
   alert(currencyRate);
});

或者甚至使用回调，如下所示:

function ajaxTest( callback ) {
        let currencyRate = "";

        $.ajax({
            url: "http://free.currencyconverterapi.com/api/v5/convert?q=USD_INR&compact=y",
            dataType: "jsonp",
            success: function(json) {
                let myObject = JSON.parse(json);
                currencyRate += myObject.USD_INR.val;


                callback(currencyRate);
            }
        })
    }

ajaxTest(function( result ) {
  alert(result)
})

已更新

根本不需要解析返回的json。

function ajaxTest() {
    let currencyRate = "";

    $.ajax({
        url: "http://free.currencyconverterapi.com/api/v5/convert?q=USD_INR&compact=y",
        dataType: "jsonp",
        success: function(json) {
            // no need to parse it to json anymore
            // let myObject = JSON.parse(json);
            currencyRate += json.USD_INR.val;

            // put alert here
            alert(currencyRate);
        }
    })
}

ajaxTest();

上面的代码应该可以工作，因为返回的 json 本身就是一个 json，不需要再将其解析为 json。