初学者 jQuery 中级 Javascript .NET ASP.NET C#

使用 API (Google, Yahoo)、Web 服务和 jQuery Ajax 实现的 ASP.NET 实时货币转换器

Shemeer NS

4.96/5 (35投票s)

2012 年 7 月 15 日

CPOL

5分钟阅读

210813

14282

使用 API (Google, Yahoo)、Web 服务和 jQuery Ajax 实现的 ASP.NET 实时货币转换器详细说明

引言

Google 和 Yahoo 提供了许多可用于我们应用程序的 API。在这里，我将演示一个使用 Google/Yahoo API 的实时货币转换器。

点击此处查看 Google 的可用 API。
点击此处查看 Yahoo 的可用 API。

对于本文，我从头开始创建了一个 Web 应用程序，该应用程序将从 Google/Yahoo 拉取数据，并使用 jQuery Ajax 和 Web 服务将其显示在用户界面中。作为参考，我已将源代码附加到本文中。您的投票、建议和反馈对于提高本文及后续文章的质量将非常有价值，请不要忘记。

我将尝试向您解释这些步骤……

背景

Google 使用其自己的隐藏 API 来显示搜索引擎中的实时货币汇率。为什么是隐藏的？因为这个 API 没有官方文档。如果您尚未检查过此服务，请点击此处，否则请参见下面的截图。

Yahoo 的实时货币转换器 API 将为您提供一个包含货币转换汇率的 .csv 文件。点击此处查看 Yahoo 的在线货币转换器，否则请参见下面的截图。

Using the Code

在此项目中，主要组件是 ASPX、CSS、jQuery 和 Web 服务。货币转换器解决方案将如下面的屏幕所示：

HTML/ASPX

从上面的屏幕截图中可以看到，UI 包含的控件非常少。两个下拉列表，一个文本框和一个按钮，结果仅显示在表格单元格 <td> 中。

在这里，文本框用于捕获需要从当前货币转换为所需货币的数量，并且两个下拉列表预先填充了货币代码和国家名称。一旦您单击转换按钮，它将调用一个 jQuery Ajax 方法，该方法内部调用一个 webmethod。您可以从附加文件中获取国家列表和代码。

CSS

我创建此 CSS 只是为了让 UI 看起来更好。

.main
{
    font-family: tahoma;
    font-size: 12px;
    border: solid 1px #03325C;
    border-collapse: collapse;
    color: #094D23;
    width: 400px;
}
.main th
{
    border-color: #03325C #03325C #03325C #03325C;
    border-style: solid solid solid solid;
    border-width: 1px 1px 1px 1px;
    color: #EDF7FF;
    padding: 4px 5px 4px 10px;
    vertical-align: bottom;
    text-align: center;
    background-color: #0E3252;
}
.result
{
    border-color: #989898 #989898 #989898 #989898;
    border-style: solid solid solid solid;
    border-width: 1px 1px 1px 1px;
    color: #1A0229;
    padding: 4px 5px 4px 10px;
    vertical-align: bottom;
    text-align: left;
    background-color: #C7CCD1;
    font-weight:bold;
}
.center
{
    text-align: center;
}
.controls
{
    font-family: tahoma;
    font-size: 12px;
    color: #032610;
}

jQuery

在这里，我将解释用于调用 Web 服务以从 Google API 或 Yahoo API 返回汇率的 jQuery Ajax 代码。

$(document).ready(function () {
    $('#submit').click(function () {
        var errormsg = "";
        var amount = $('#txtAmount').val();
        var from = $('#drpFrom').val();
        var to = $('#drpTo').val();
        $.ajax({ type: "POST",
            url: "WebService.asmx/ConvertGOOG",
            data: "{amount:" + amount + ",fromCurrency:'" + 
                    from + "',toCurrency:'" + to + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            beforeSend: function () {
                $('#results').html("Converting...");
            },
            success: function (data) {
                $('#results').html(amount + ' ' + from + '=' + data.d.toFixed(2) + ' ' + to);
            },
            error: function (jqXHR, exception) {
                if (jqXHR.status === 0) {
                    errormsg = 'Not connect.\n Verify Network.'; ;
                } else if (jqXHR.status == 404) {
                    errormsg = 'Requested page not found. [404]'; ;
                } else if (jqXHR.status == 500) {
                    errormsg = 'Internal Server Error [500].'; ;
                } else if (exception === 'parsererror') {
                    errormsg = 'Requested JSON parse failed.'; ;
                } else if (exception === 'timeout') {
                    errormsg = 'Time out error.'; ;
                } else if (exception === 'abort') {
                    errormsg = 'Ajax request aborted.'; ;
                } else {
                    errormsg = 'Uncaught Error.';
                }
                $('#results').html(errormsg);
                $('<a href="#" >Click here for more details</a>').click(function () {
                    alert(jqXHR.responseText);
                }).appendTo('#results');
            }
        });
    });
});

在上面的代码中，click() 事件绑定到提交按钮，jQuery val() 函数用于检索控件值并将其传递给 webservice 方法。通过使用 $.ajax，我们正在向 .NET webservice 发起 jQuery Ajax 调用。在这里，在发起 Ajax 调用之前，我通过 $.ajax 的 beforeSend 设置将结果值设置为“Converting...”。如果调用成功，则货币汇率将显示在结果单元格中，否则将显示错误。

Google

我们可以通过将 jQuery Ajax 调用的 url 设置如下来调用 Google Web Method

 url: "WebService.asmx/ConvertGOOG",

Yahoo

我们可以通过将 jQuery Ajax 调用的 url 设置如下来调用 Yahoo Web Method

url: "WebService.asmx/ConvertYHOO",

当 ID 为“submit”（转换按钮）的元素被单击时，将调用此方法。通过 jQuery 的 val() 函数，HTML 控件的值被存储到一个变量中，该变量被传递到 Web 服务方法。我们通过 $.ajax 调用 jQuery Ajax，Web 服务名称和方法在 jQuery.ajax() 函数的 url 设置中指定。因此，当我们单击结果时，单元格将显示“Converting...”，如果调用成功，则预期输出将显示在结果 <td> 中，否则将显示错误描述和一个超链接，该超链接将详细显示错误原因。我已尝试在 jQuery Ajax 调用中处理一些错误。

jQuery Ajax 调用的错误设置

此块用于捕获对 Web Method 的 jQuery Ajax 调用。此代码将设置错误描述并添加一个用于更多错误详细信息的超链接，您可以在下方看到示例输出

error: function (jqXHR, exception) {
    if (jqXHR.status === 0) {
        errormsg = 'Not connect.\n Verify Network.'; ;
    } else if (jqXHR.status == 404) {
        errormsg = 'Requested page not found. [404]'; ;
    } else if (jqXHR.status == 500) {
        errormsg = 'Internal Server Error [500].'; ;
    } else if (exception === 'parsererror') {
        errormsg = 'Requested JSON parse failed.'; ;
    } else if (exception === 'timeout') {
        errormsg = 'Time out error.'; ;
    } else if (exception === 'abort') {
        errormsg = 'Ajax request aborted.'; ;
    } else {
        errormsg = 'Uncaught Error.';
    }
    $('#results').html(errormsg);
    $('<a href="#" >Click here for more details</a>').click(function () {
        alert(jqXHR.responseText);
    }).appendTo('#results');
}

2012 年 7 月 15 日：初始版本

使用 API (Google, Yahoo)、Web 服务和 jQuery Ajax 实现的 ASP.NET 实时货币转换器

目录

引言

背景

Using the Code

HTML/ASPX

CSS

jQuery

Google

Yahoo

jQuery Ajax 调用的错误设置

Webservice

Google

Yahoo

摘要

历史