Question

我正在做货币转换器，我打算做的是当页面加载时，它使用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>

Answer 1

问题是你在同步中混合asynch：

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

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

success : function(data) 
{
    rate = parseFloat(data.rate);
    showConvertion();
}

文档上的Ajax准备不正常

1 个答案: