Javascript 使用JSONp的货币转换器
我在使用JSONP和我试图构建的货币转换器时遇到了困难。我假设这是一件很简单的事情,因为我对编程还是很陌生的 我有HTML,用户可以在其中输入他们想要转换的数字,并选择起始货币和两种货币。当他们单击convert时,会显示一条加载消息,但不会发生其他任何事情。非常感谢所有的帮助 JQuery:Javascript 使用JSONp的货币转换器,javascript,jquery,html,css,jsonp,Javascript,Jquery,Html,Css,Jsonp,我在使用JSONP和我试图构建的货币转换器时遇到了困难。我假设这是一件很简单的事情,因为我对编程还是很陌生的 我有HTML,用户可以在其中输入他们想要转换的数字,并选择起始货币和两种货币。当他们单击convert时,会显示一条加载消息,但不会发生其他任何事情。非常感谢所有的帮助 JQuery: $(function() { $('#btnConvert').click(function() { $('#result').html('Loading...'); var amount = $('
$(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>
另一个更新-当我到达某处
$(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;
}
});
});
});
因此,当我测试它时,我确实得到了(在开发人员工具中)的响应:
函数({“to”:“EUR”,“rate”:0.728948999996,“from”:“USD”,“v”:0.728948999996})
这就是我想要的,但我不知道如何显示“v”。。。我一直在尝试resp.v或data.v,但它不会显示…这就是您的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将自动执行此操作。首先,您的请求中有一个额外的字符,使得请求无效:
?中的$from应为中的
html()。试试这个:
success: function(resp) {
$('#result').html(resp.v);
}
如果这不是从resp
中获取信息的正确方法,请尝试resp[“v”]
或其他方法。这很好。您可以尝试这个
$('#result').val('Loading...');
var amount = $('#amount').val();
var from = $('#from').val();
var to = $('#to').val();
$.ajax({
type: "GET",
url: "http://free.currencyconverterapi.com/api/v5/convert?q=" + from + "_" + to +"&compact=y",
success: function(data) {
var exchangeRate = JSON.stringify(data).replace(/[^0-9\.]/g,'');
var result = amount*exchangeRate;
$('#result').val(parseFloat(result).toFixed(2));
}
});
});
Firebug是您的朋友,所以您可以观看请求的发送和返回等。这太愚蠢了!“resp”应该有什么意思吗。我把我的成功函数改成了你如何显示它,它仍然只是加载。。。还有加载…仍然不起作用:(我已经完全按照你说的做了,但没有起作用。我还试着使用data.v,data.[v],data.[v]我无法得到它。你是否按照Mark的建议尝试并使用Firebug尝试调试它?如果是这样,但你仍然卡住了,请告诉我们你找到了什么。抱歉,我没有看到他的回应。我正在使用Chrome的开发工具试着调试它…我收到以下错误消息:get 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
$('#result').val('Loading...');
var amount = $('#amount').val();
var from = $('#from').val();
var to = $('#to').val();
$.ajax({
type: "GET",
url: "http://free.currencyconverterapi.com/api/v5/convert?q=" + from + "_" + to +"&compact=y",
success: function(data) {
var exchangeRate = JSON.stringify(data).replace(/[^0-9\.]/g,'');
var result = amount*exchangeRate;
$('#result').val(parseFloat(result).toFixed(2));
}
});
});