股票实时行情查询 - 前端代码示例 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>股票查询</title>
	<meta charset='utf-8'>
	<style type='text/css'>
		table {
			border-collapse: collapse;
		}
		td, th {
			padding: 5px;
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<h1>股票实时行情查询</h1>
	<div>
		<label for='stockCode'>股票代码：</label>
		<input type='text' id='stockCode'>
		<button id='searchBtn'>查询</button>
	</div>
	<div id='tableWrapper'></div>
<pre><code>&lt;script type='text/javascript'&gt;
	const searchBtn = document.querySelector('#searchBtn');
	searchBtn.addEventListener('click', () =&gt; {
		const stockCode = document.querySelector('#stockCode').value;
		const apiUrl = `https://api.doctorxiong.club/v1/stock/get?code=${stockCode}`;
		fetch(apiUrl)
			.then(res =&gt; res.json())
			.then(data =&gt; {
				const tableWrapper = document.querySelector('#tableWrapper');
				if (data.code === 200) {
					const stockData = data.data;
					const tableHtml = `
						&lt;table&gt;
							&lt;thead&gt;
								&lt;tr&gt;
									&lt;th&gt;股票代码&lt;/th&gt;
									&lt;th&gt;股票名称&lt;/th&gt;
									&lt;th&gt;当前价格&lt;/th&gt;
									&lt;th&gt;昨收&lt;/th&gt;
									&lt;th&gt;今开&lt;/th&gt;
									&lt;th&gt;成交量（手）&lt;/th&gt;
								&lt;/tr&gt;
							&lt;/thead&gt;
							&lt;tbody&gt;
								&lt;tr&gt;
									&lt;td&gt;${stockData.code}&lt;/td&gt;
									&lt;td&gt;${stockData.name}&lt;/td&gt;
									&lt;td&gt;${stockData.now}&lt;/td&gt;
									&lt;td&gt;${stockData.close}&lt;/td&gt;
									&lt;td&gt;${stockData.open}&lt;/td&gt;
									&lt;td&gt;${stockData.volume}&lt;/td&gt;
								&lt;/tr&gt;
							&lt;/tbody&gt;
						&lt;/table&gt;
					`;
					tableWrapper.innerHTML = tableHtml;
				} else {
					tableWrapper.innerHTML = `&lt;p&gt;${data.message}&lt;/p&gt;`;
				}
			})
			.catch(err =&gt; {
				console.error(err);
				const tableWrapper = document.querySelector('#tableWrapper');
				tableWrapper.innerHTML = '&lt;p&gt;查询失败，请稍后再试。&lt;/p&gt;';
			});
	});
&lt;/script&gt;
</code></pre>
</body>
</html>