我正在构建一个包含所有 50 个州的选择标签的网站。我希望能够为每个选定的状态生成一个页面,而不必编写 50 个单独的页面。关于我将如何做到这一点的任何想法?谢谢你。
1 回答
您可以在页面加载时加载所有数据,也可以通过 ajax 加载,并且只显示当前状态的数据,
或者,如果您有一个服务器端数据库/数据源来从中提取数据,也可以让页面为特定状态提供数据,由查询/GET 变量定义,URL 看起来像:
http://mysite.com/myPage.aspx?state=ca
或者
http://mysite.com/myPage.php?state=az
当页面被请求时,您可以让您的服务器页面填充当前状态的正确数据,然后将其发送到客户端。
一般来说,我会倾向于服务器端解决方案,特别是如果您的访问者可能只会访问少数几个州,那么就没有理由加载所有州的数据。另一方面,如果每个州的数据非常少,那么这两种方式都可能没有太大的不同。
编辑
我不知道网络上有任何特定的教程,但由于这包括将一些东西放在一起,我会告诉你可能对完成这个有用的主题。
根据您对 php、c# 或其他为您的服务器端部分选择的语言的知识水平,研究以下主题:
- 读取 Get 变量
- 切换案例语句
- 将变量值添加到 html 的部分中,或连接 html 字符串
- 可选的各种数据库主题,(如果您不想将数据硬编码到代码中)
例如,您的服务器端 php 页面可能如下所示(未经测试的代码):
<?php
switch($_GET["state"]) {
case "ca":
$pageTitle = "California";
$pageContent = "stuff about CA";
break;
case "az":
$pageTitle = "Arizona";
$pageContent = "stuff about a really hot state";
break;
...
}
....
echo '<h1>' . $pageTitle . '</h1>' . '<p>' . $pageContent . '</p>';
?>
除此之外,您还希望在访问者选择不同状态时进行处理,并在选择状态时加载正确的页面。使用 jQuery,您可以使用change() 方法做一些事情。
在您的 html 正文中声明您使用 id="stateSelectDropDown" 的下拉列表(选择输入),然后在您的 javascript(未经测试的代码)中:
<script type="text/javascript">
$(function() {
$("#stateSelectDropDown").change(funciton() {
window.location = "nameOfThisPage.php?state=" + $(this).val();
});
}
</script>
对于任何拼写错误或语法错误,我深表歉意,我希望这能为您指明正确的方向。