0

我正在做一个货币转换器，我打算在加载页面时使用 document.ready 函数调用 ajax 来显示标准货币。但事实并非如此。

有一个按键功能可以做同样的事情并且它可以工作。所以，问题是它在加载页面时不显示，而只在按键功能上显示。

有人可以帮忙吗？

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="layout.css">
        <script src='jquery.js'></script>
        <title>Calculator Teste</title>
    </head>
    <body>
        <header>
            <div id="logo">Money Converter</div>
        </header>
        <div id="wrapper">
    <div id="from_select">
        <select name="from" id="from">
            <option selected="selected" value="USD">United States Dollars - USD</option>
            <option value="EUR">Euro - EUR</option>
            <option value="GBP">United Kingdom Pounds - GBP</option>
            <option value="CAD">Canada Dollars - CAD</option>
            <option value="AUD">Australia Dollars - AUD</option>
            <option value="JPY">Japan Yen - JPY</option>
            <option value="INR">India Rupees - INR</option>
            <option value="NZD">New Zealand Dollars - NZD</option>
            <option value="CHF">Switzerland Francs - CHF</option>
            ...
        </select>
    </div>


    <div id="to_select">
        <select name="to" id="to">
        <option selected="selected" value="EUR">Euro - EUR</option>
            <option value="USD">United States Dollars - USD</option>
            <option value="GBP">United Kingdom Pounds - GBP</option>
            <option value="CAD">Canada Dollars - CAD</option>
            <option value="AUD">Australia Dollars - AUD</option>
            <option value="JPY">Japan Yen - JPY</option>
            ...
        </select>
    </div>

        <div id="result"><i>getting info...</i></div>
        <input type="number" class="amount" name="amount" id="amount" value="1.00" autofocus/>
    </div>
    </body>
         <script>
            var rate = null;
             getRate = function() {
                // Getting Values
                var from = $('#from').val();
                var to = $('#to').val();
                url = "http://rate-exchange.appspot.com/currency?from=" + from + "&to=" + to + "&calback=jsonpCallback";
                $.ajax({
                url: url,
                type: "POST",
                async: false,
                dataType: "jsonp",
                success : function(data) 
                {
                    rate = parseFloat(data.rate);
                }
                });
            };
            getRate();

            showConvertion = function(){
                var amount = $('#amount').val();
                result = amount * rate;
                // alert(result);
                $('#result').html(result.toFixed(2));
            };

            $(document).ready(function (){
                getRate();
                showConvertion();
            });
            $('#from').change(function (){
                getRate().then(showConvertion);
            });
            $('#to').change(function (){
                getRate().then(showConvertion);
            });

            $('#amount').keypress(function (){
                showConvertion();
            });
         </script>
</html>
4

1 回答 1

1

问题是您将 asynch 与 synch 混合：

$(document).ready(function ()
{
    getRate();
    showConvertion();
});

当ShowConvertion被调用时，您在 getRate 中进行的 AJAX 调用可能尚未返回，因此您rate使用的变量ShowConvertion可能当时未设置。您应该将调用包装ShowConvertion到 ajax 调用的成功函数中：

success : function(data) 
{
    rate = parseFloat(data.rate);
    showConvertion();
}
于 2013-06-10T14:26:30.480 回答