银行汇率查询：用 HTML+JS 做一个实时汇率查询小工具（可直接运行 Demo）
# 银行汇率查询：用 HTML+JS 做一个实时汇率查询小工具（可直接运行 Demo）
> 接口：银行汇率查询（apiCode=105）· 接入点：汇率查询（105-30）· 免费 · 返回格式：JSON · 适用人群：前端开发者 / 想快速验证接口的人 · 阅读时间：约 5 分钟
## TL;DR
- 一个单文件 HTML，填好 AppKey 即可在浏览器里看到主流货币实时牌价表。
- 直接调用 `105-30` 接入点，把 `showapi_res_body.list` 渲染成表格。
- 所有请求走浏览器 `fetch`，无需后端，方便嵌入官网或内部工具。
## Why
看文档不如跑起来。本篇给你一份开箱即用的单页 Demo：打开就能查牌价、验证接口连通性、给产品/运营演示效果。复制后只需把 `YOUR_APPKEY` 换成自己的即可运行。
## What
| 项目 | 说明 |
|------|------|
| 技术栈 | 原生 HTML + JavaScript（fetch） |
| 调用的接入点 | 汇率查询（105-30） |
| 关键处理 | 判空、字符串价位转数值显示、错误提示 |
| 运行方式 | 保存为 `.html` 双击打开，或起本地静态服务 |
## How
### 步骤：保存并运行
1. 新建 `exchange-demo.html`，粘贴下方代码。
2. 把 `YOUR_APPKEY` 替换为你的真实 AppKey。
3. 浏览器打开，点击「查询」，表格即渲染全部货币牌价。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>银行汇率查询 Demo</title>
<style>table{border-collapse:collapse}td,th{border:1px solid #ccc;padding:4px 8px}th{background:#f5f5f5}</style>
</head>
<body>
<h2>银行汇率实时牌价</h2>
<button onclick="load()">查询</button>
<p id="tip"></p>
<table id="t"><thead><tr><th>货币</th><th>代码</th><th>现汇买入</th><th>现汇卖出</th><th>中行折算</th></tr></thead><tbody></tbody></table>
<script>
async function load() {
const tip = document.getElementById("tip");
tip.textContent = "加载中…";
const url = "https://route.showapi.com/105-30?appKey=YOUR_APPKEY";
try {
const res = await fetch(url, { method: "POST",
headers: { "content-type": "application/x-www-form-urlencoded" } });
const js = await res.json();
if (js.showapi_res_code !== 0 || js.showapi_res_body.ret_code !== 0) {
tip.textContent = "查询失败：" + (js.showapi_res_error || "ret_code 非0"); return;
}
const tb = document.querySelector("#t tbody"); tb.innerHTML = "";
for (const it of js.showapi_res_body.list) {
const tr = document.createElement("tr");
tr.innerHTML = `<td>${it.name||""}</td><td>${it.code||""}</td>
<td>${it.hui_in||"-"}</td><td>${it.hui_out||"-"}</td><td>${it.zhesuan||"-"}</td>`;
tb.appendChild(tr);
}
tip.textContent = "共 " + js.showapi_res_body.listSize + " 条（仅供参考，数据为延迟数据）";
} catch (e) { tip.textContent = "请求异常：" + e; }
}
</script>
</body>
</html>
```
> 提示：浏览器直接打开本地文件时，跨域（CORS）可能被拦截。若遇到，请起一个本地静态服务（如 `python -m http.server`）再访问。
## 返回示例与解析
同[快速开始](https://www.showapi.com/guides/exchange-rate-quickstart-105)的返回结构，`list` 每条为 `{name, code, hui_in, chao_in, hui_out, chao_out, zhesuan, day, time}`。Demo 仅展示核心四列，其余字段可自行扩展。
## 进阶 / 边界
- 想做「单货币查询」：在请求体加 `code=USD` 即可（见[快速开始](https://www.showapi.com/guides/exchange-rate-quickstart-105)）。
- 想加「货币选择器」：先调[币种列表接入点](https://www.showapi.com/guides/exchange-rate-currency-list-105)拿到 code 集合再渲染下拉框。
- 免费接口有使用档次限制，Demo 仅作演示，生产环境请加[本地缓存](https://www.showapi.com/guides/exchange-rate-cache-105)。
## FAQ
**Q：打开 HTML 后请求被拦截怎么办？**
多半是浏览器 CORS 限制。用本地静态服务（如 `python -m http.server`）访问，或把请求放到你自己的后端代理转发。
**Q：为什么表格里有些格是“-”？**
部分货币某些价位为空字符串（如小众货币无现汇买入价），Demo 用 "-" 兜底显示。
**Q：数据能用于交易吗？**
不能。牌价有数分钟延迟、仅供参考，实际以银行柜台为准。
## 相关能力 / 下一步阅读
- [银行汇率查询：5 分钟接入——从注册到第一次实时汇率查询](https://www.showapi.com/guides/exchange-rate-quickstart-105)
- [银行汇率查询：用"币种列表"接入点为前端做货币选择器](https://www.showapi.com/guides/exchange-rate-currency-list-105)
- **本系列共 13 篇**：查看[银行汇率查询指南总目录](https://www.showapi.com/guides/exchange-rate-guides-105)
