银行汇率查询：一份单文件 HTML 就能看实时牌价
约 13 分钟 入门银行汇率查询HTML Demo前端示例实时牌价
# 银行汇率查询：一份单文件 HTML 就能看实时牌价
接口：银行汇率查询（apiCode=105）· 接入点：汇率查询（105-30）· 免费（L0 基础版 100 次/天、1 QPS）· 请求方式：POST / GET · 返回格式：JSON · 适用人群：前端开发者、需要快速验证接口的人 · 阅读时间：约 5 分钟 · 最后实测核对：2026-09-18
## 核心要点
- 一个 HTML 文件、一段原生 JavaScript，把 `105-30` 的返回渲染成牌价表格，填上 AppKey 就能打开。
- 2026-09-18 实测：在浏览器页面的脚本上下文里直接 `fetch` 调用 105-30 成功返回，接口对浏览器端调用是可用的。
- 表格要对空字符串价位做兜底显示，实测 46 条记录里有 17 种货币存在空价位。
## 打开就有数，不用先搭工程
给运营演示牌价效果、验证接口有没有通、给产品看数据长什么样——这些场景不值得先起一个前端工程。把下面这份 HTML 存成文件，把 `YOUR_APPKEY` 换成自己的值，用浏览器打开就是一个能查牌价的页面。
整个文件只有一处外部依赖：接口地址。没有构建步骤，没有第三方库。
## 接口速览
| 项目 | 说明 |
|------|------|
| 调用的接口 | 银行汇率查询（apiCode=105） |
| 使用的接入点 | 汇率查询（105-30） |
| 技术栈 | 原生 HTML + CSS + JavaScript（fetch） |
| 关键处理 | 空值兜底、字符串价位直接展示、错误提示、超时控制 |
| 运行方式 | 存为 `.html` 双击打开；若被浏览器拦截，改用本地静态服务访问 |
## 完整代码
把下面的内容保存为 `exchange-demo.html`，替换 `YOUR_APPKEY` 后打开：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>银行汇率查询 · 牌价小工具</title>
<style>
body { font-family: system-ui, -apple-system, "Microsoft YaHei", sans-serif; margin: 24px; color: #222; }
h1 { font-size: 20px; }
.bar { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
input, button { font-size: 14px; padding: 6px 10px; }
.status { color: #666; font-size: 13px; }
.status.err { color: #c0392b; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { border: 1px solid #e5e5e5; padding: 6px 8px; text-align: right; }
th:first-child, td:first-child, th:nth-child(2), td:nth-child(2) { text-align: left; }
thead th { background: #fafafa; font-weight: 600; }
</style>
</head>
<body>
<h1>银行汇率查询 · 实时牌价（100 外币兑人民币）</h1>
<div class="bar">
<label>AppKey：<input id="appKey" placeholder="YOUR_APPKEY" size="34" /></label>
<label>货币代码：<input id="code" placeholder="留空查全部" size="12" /></label>
<button id="query">查询</button>
</div>
<div id="status" class="status">等待查询</div>
<table>
<thead>
<tr>
<th>代码</th><th>货币</th><th>现汇买入</th><th>现钞买入</th>
<th>现汇卖出</th><th>现钞卖出</th><th>中行折算</th><th>发布日</th><th>时间</th>
</tr>
</thead>
<tbody id="rows"></tbody>
</table>
<script>
const API = "https://route.showapi.com/105-30";
// 接口以字符串返回价位，空字符串表示该价位无数据，统一显示为 "-"
const show = (v) => (v === undefined || v === null || v === "") ? "-" : v;
async function query() {
const appKey = document.getElementById("appKey").value.trim() || "YOUR_APPKEY";
const code = document.getElementById("code").value.trim();
const statusEl = document.getElementById("status");
const tbody = document.getElementById("rows");
statusEl.className = "status";
statusEl.textContent = "查询中…";
const body = new URLSearchParams();
if (code) body.set("code", code); // 不传 code 时接口返回全部货币
try {
const res = await fetch(`${API}?appKey=${encodeURIComponent(appKey)}`, {
method: "POST",
headers: { "content-type": "application/x-www-form-urlencoded" },
body,
signal: AbortSignal.timeout(15000) // 对齐文档的 15 秒读超时
});
const js = await res.json();
if (js.showapi_res_code !== 0) throw new Error(js.showapi_res_error || "通道异常");
const rb = js.showapi_res_body || {};
if (rb.ret_code !== 0) throw new Error("业务失败，ret_code=" + rb.ret_code);
const list = rb.list || [];
tbody.innerHTML = list.map((it) => `
<tr>
<td>${show(it.code)}</td>
<td>${show(it.name)}</td>
<td>${show(it.hui_in)}</td>
<td>${show(it.chao_in)}</td>
<td>${show(it.hui_out)}</td>
<td>${show(it.chao_out)}</td>
<td>${show(it.zhesuan)}</td>
<td>${show(it.day)}</td>
<td>${show(it.time)}</td>
</tr>`).join("");
statusEl.textContent = `共 ${list.length} 条，快照时间 ${list[0] ? list[0].day + " " + list[0].time : "-"}`;
} catch (err) {
statusEl.className = "status err";
statusEl.textContent = "查询失败：" + err.message;
}
}
document.getElementById("query").addEventListener("click", query);
</script>
</body>
</html>
```
## 三处需要按实际情况调整的地方
**AppKey 的位置。** 上面的 Demo 把 AppKey 放在输入框里，方便随手验证。放生产页面时不要这样做——AppKey 出现在前端源码里任何人都能看到。正式做法是前端请求你自己的后端，由后端带 AppKey 调接口。
**空值兜底。** `show()` 函数把空字符串显示成 `-`。实测不传 `code` 时返回的 46 条记录里，17 种货币存在空价位，直接参与计算会得到 `NaN`。
**超时值。** 代码用的是 15 秒，与 OpenAPI 文档标注的 105-30 读写超时一致。如果你改成调用币种列表接入点（105-35），超时按 30 秒设置。
## 本地打开被拦截时怎么办
2026-09-18 实测：在浏览器页面的脚本上下文里直接 `fetch` 调用 105-30，成功返回了 JSON，说明接口支持浏览器端跨域调用。如果页面以本地文件方式打开时浏览器仍拦下了请求，改用本地静态服务访问即可：
```bash
python -m http.server 8080
```
然后访问 `http://localhost:8080/exchange-demo.html`。
## FAQ
**Q1：这个 Demo 需要后端吗？**
不需要。它直接用浏览器 `fetch` 调接口，适合演示与自测。上线时把请求放到自己的后端，避免 AppKey 暴露在前端。
**Q2：为什么表格里有些格显示「-」？**
那是空字符串价位的兜底显示。实测 46 条记录里有 17 种货币存在空价位，例如部分货币只有现钞价、没有现汇价。
**Q3：页面里的数据可以直接给用户看吗？**
可以展示，但要标注数据性质。接口返回的是延迟数据、仅供参考，实际交易汇率以当地银行为准。
**Q4：想加一个货币下拉框怎么做？**
先调币种列表接入点（105-35）拿 `exchange_list[].code`，再渲染成 `<option>`。注意那份列表是外币列表，如果要让用户从人民币出发，需要自行补上 CNY。
**Q5：可以把它嵌到已有的管理后台吗？**
可以。核心只有 `query()` 一个函数，把它的 `fetch` 部分搬进你现有的组件即可，表格部分按自己的 UI 库替换。
## 下一步阅读
- [银行汇率查询：5 分钟从注册跑到第一次调用](https://www.showapi.com/guides/exchange-rate-quickstart-105)：接口参数与返回结构的起点。
- [银行汇率查询：用币种列表接入点做货币下拉框](https://www.showapi.com/guides/exchange-rate-currency-list-105)：给 Demo 加上货币选择器。
- [银行汇率查询：L0 档位每天 100 次，缓存该缓存什么](https://www.showapi.com/guides/exchange-rate-cache-105)：页面被反复刷新时怎么控制调用量。
- **本系列共 13 篇**：查看[银行汇率查询指南总目录](https://www.showapi.com/guides/exchange-rate-guides-105)
