2013-12-12 75 views
0

我遇到了JSONP和我想要建立的貨幣轉換器的困難。我假設它是如此簡單,因爲我在編程方面仍然很新穎等。貨幣轉換器JSONp

我有HTML,用戶可以在其中輸入他們想要轉換的數字,然後選擇from和兩種貨幣。當他們點擊轉換時,會顯示一條加載消息,但沒有其他事情發生。任何和所有的幫助是非常大的,非常感謝!

JQuery的:

$(function() { 
$('#btnConvert').click(function() { 

$('#result').html('Loading...'); 

var amount = $('#amount').val(); 
var from = $('#from').val(); 
var to = $('#to').val(); 

$.ajax({ type: "GET", 
    url: "http://rate-exchange.appspot.com/currency?$from"+from+"&to="+to+"&q="+amount+"", 
    dataType: "jsonp", 
    success: function() { 
     $('#result').html(); 
    } 
}); 
}); 
}); 

這裏是我的HTML的主體部分:

<form id="form1" runat="server"> 
<table> 
<tr><td align="right">Enter Amount:</td><td> <input id="amount" maxlength="12" size="5" value="1" /></td></tr> 
<tr><td align="right">From:</td><td> 
<select id="from"> 
<option value="AED">United Arab Emirates Dirham (AED)</option> 
<option value="ANG">Netherlands Antillean Guilder (ANG)</option> 
<option value="BWP">Botswanan Pula (BWP)</option> 
<option value="HKD">Hong Kong Dollar (HKD)</option> 
<option value="HNL">Honduran Lempira (HNL)</option> 
<option value="HRK">Croatian Kuna (HRK)</option> 
<option value="HUF">Hungarian Forint (HUF)</option> 
<option value="IDR">Indonesian Rupiah (IDR)</option> 
<option value="ILS">Israeli New Sheqel (ILS)</option> 
<option value="MAD">Moroccan Dirham (MAD)</option> 
<option value="MDL">Moldovan Leu (MDL)</option> 
<option value="MKD">Macedonian Denar (MKD)</option> 
<option value="MUR">Mauritian Rupee (MUR)</option> 
<option value="MVR">Maldivian Rufiyaa (MVR)</option> 
<option value="MXN">Mexican Peso (MXN)</option> 
<option value="MYR">Malaysian Ringgit (MYR)</option> 
<option value="NAD">Namibian Dollar (NAD)</option> 
<option value="TTD">Trinidad and Tobago Dollar (TTD)</option> 
<option value="TWD">New Taiwan Dollar (TWD)</option> 
<option value="TZS">Tanzanian Shilling (TZS)</option> 
<option value="UAH">Ukrainian Hryvnia (UAH)</option> 
<option value="UGX">Ugandan Shilling (UGX)</option> 
<option value="USD" selected>US Dollar (USD)</option> 

</select></td> 
</tr> 
<tr> <td align="right">to:</td><td> 
<select id="to"> 
<option value="AED">United Arab Emirates Dirham (AED)</option> 
<option value="ANG">Netherlands Antillean Guilder (ANG)</option> 
<option value="ARS">Argentine Peso (ARS)</option> 
<option value="AUD">Australian Dollar (AUD)</option> 
<option value="EGP">Egyptian Pound (EGP)</option> 
<option value="EUR">Euro (EUR)</option> 
<option value="FJD">Fijian Dollar (FJD)</option> 
<option value="GBP">British Pound Sterling (GBP)</option> 
<option value="HKD">Hong Kong Dollar (HKD)</option> 
<option value="HNL">Honduran Lempira (HNL)</option> 
<option value="HRK">Croatian Kuna (HRK)</option> 
<option value="HUF">Hungarian Forint (HUF)</option> 
<option value="IDR">Indonesian Rupiah (IDR)</option> 
<option value="ILS">Israeli New Sheqel (ILS)</option> 
<option value="INR" selected>Indian Rupee (INR)</option> 
<option value="JMD">Jamaican Dollar (JMD)</option> 
<option value="JOD">Jordanian Dinar (JOD)</option> 
<option value="JPY">Japanese Yen (JPY)</option> 
<option value="MVR">Maldivian Rufiyaa (MVR)</option> 
<option value="MXN">Mexican Peso (MXN)</option> 
<option value="MYR">Malaysian Ringgit (MYR)</option> 
<option value="NAD">Namibian Dollar (NAD)</option> 
<option value="NGN">Nigerian Naira (NGN)</option> 
<option value="NIO">Nicaraguan Córdoba (NIO)</option> 
<option value="NOK">Norwegian Krone (NOK)</option> 
<option value="NPR">Nepalese Rupee (NPR)</option> 
<option value="NZD">New Zealand Dollar (NZD)</option> 
<option value="OMR">Omani Rial (OMR)</option> 
<option value="PEN">Peruvian Nuevo Sol (PEN)</option> 
<option value="PGK">Papua New Guinean Kina (PGK)</option> 
<option value="PHP">Philippine Peso (PHP)</option> 
<option value="PKR">Pakistani Rupee (PKR)</option> 
<option value="PLN">Polish Zloty (PLN)</option> 
<option value="PYG">Paraguayan Guarani (PYG)</option> 
<option value="QAR">Qatari Rial (QAR)</option> 
<option value="RON">Romanian Leu (RON)</option> 
<option value="RSD">Serbian Dinar (RSD)</option> 

</select></td></tr> 
<tr><td></td><td> <input id="btnConvert" type="button" value="Convert" style="padding:5px;  10px;"/></td></tr> 
</table> 
<div > 
<div id="result" style="padding: 2px; margin: 5px; font-size:20pt"> 
</div> 
</div> 
<br /> 
</form> 


<!-- jQuery hosted by google version 2.0.3-->  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 

<script src="test_2.js"></script> 

更新:我想我找到感覺了!當我使用開發人員工具時,get URL現在是正確的...但它仍然不起作用。 。等等 $(文件)。就緒(函數(){ $( '#btnConvert')點擊(函數(){

 $('#result').html('Loading...'); 

    var amount = $('#amount').val(); 
    var from = $('#from').val(); 
    var to = $('#to').val(); 
    var value = []; 

    $.ajax({ 
     type: "GET", 
     url: "http://rate-exchange.appspot.com/currency?from=" + from + "&to=" + to + "&q=" + amount + "&callback=success", 
     dataType: "jsonp", 
     jsonp: false, 
     cache: true, 
     success: function success(resp) { 
      $('#result').html(resp.v); 

     } 
    }); 
}); 
}); 


另一個更新 - 正如我得到的地方。 ..

$(document).ready(function() { 
$('#btnConvert').click(function() { 

    $('#result').html('Loading...'); 

    var amount = $('#amount').val(); 
    var from = $('#from').val(); 
    var to = $('#to').val(); 




    $.ajax({ 
     type: "GET", 
     url: "http://rate-exchange.appspot.com/currency?from=" + from + "&to=" + to + "&q=" + amount + "&callback=function", 
     dataType: "jsonp", 
     jsonp: false, 
     cache: true, 
     success: function(resp) { 
      document.getElementById('#result').innerHtml=resp.v; 
     } 


    }); 
}); 
}); 

所以,當我測試一下,我得到的(開發人員工具)的迴應: 「從」 0.72894899999999996,: 功能({ 「到」: 「EUR」, 「速度」: 「美元」,「v」:0.72894899999999996} )

這是我想要的東西,但我不知道如何顯示「V」 ......我一直在試圖resp.v或data.v但它不會顯示...

+0

螢火蟲是你的朋友,所以你可以看請求出去,並返回等 – Mark

回答

0

這就是你的ajax功能應該看起來像 -

$.ajax({ 
    type: "GET", 
    url: "http://rate-exchange.appspot.com/currency?from="+from+"&to="+to+"&q="+amount, 
    dataType: "jsonp", 
    success: function(resp) { 
     $('#result').html(resp.v); 
    } 
}); 

你不應該指定URL中的回調函數名稱。 Jquery會自動做到這一點。

+0

那麼,這只是愚蠢的! 'resp'應該是什麼意思。我改變了我成功的功能正是你如何表現它,它仍然只是加載...並載入中... – Deevod

0

首先,你有一個額外的字符在那裏使你的請求無效:?$from應該是?from

html()沒有參數只獲取html,你沒有設置它爲任何東西。試試這個:

success: function(resp) { 
    $('#result').html(resp.v); 
} 

如果不是得到v propertyresp正確的方式,嘗試resp["v"]什麼的。

+0

仍然沒有工作:( 我已經試過你說做什麼,以及它沒有工作。我也嘗試使用data.v,data。[v],data。[「v」],我無法得到它。 – Deevod

+0

您是否曾嘗試過Mark提示並使用Firebug來嘗試調試? '仍然卡住,讓我們知道你找到了什麼。 –

+0

對不起,我沒有看到他的迴應。我使用Chrome的開發人員工具來嘗試和調試它... 我收到此錯誤消息: GET http://rate-exchange.appspot.com/currency?from=USD&to=EUR&q=1 jquery.js:7845 x.support.cors.e.crossDomain.send jquery。 js:7845 x.extend.ajax jquery.js:7301 (匿名函數)test_2.js:10 x.event.dispatch jquery.js:4676 y.handle – Deevod