html - 根据所选变量生成页面信息

Question

我正在构建一个带有包含所有 50 个州的选择标签的网站。我希望能够为每个选定的状态生成一个页面，而不必编写 50 个单独的页面。关于如何实现这一目标的任何想法？谢谢。

Answer 1

您可以在页面加载时加载所有数据，也可以通过 ajax 加载，并且只显示当前状态的数据，

或者如果您有一个服务器端数据库/数据源来从中提取数据，您也可以让页面为特定状态提供数据，由查询/GET 变量定义，URL 看起来像:

http://mysite.com/myPage.aspx?state=ca

或

http://mysite.com/myPage.php?state=az

当页面被请求时，您可以让您的服务器页面为当前状态填充正确的数据，然后将其发送到客户端。

一般来说，我会倾向于服务器端解决方案，特别是如果您的访问者可能只会访问少数几个州，那么就没有理由加载所有州的数据。另一方面，如果每个州的数据非常少，那么这两种方式可能不会有太大不同。

编辑

我不知道网络上有任何特定的教程，但由于这包括将一些内容放在一起，我将告诉您可能对完成此教程有用的主题。

根据您对 php、c# 或其他为服务器端部分选择的语言的知识水平，研究以下主题:

1. 读取一个Get变量
2. 切换案例语句
3. 将变量值添加到部分 html 中，或连接 html 字符串
4. 可选的各种数据库主题，(如果你不想硬编码数据到你的代码中)

例如，您的服务器端 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() method 做一些事情.

在您的 html 正文中声明您使用 id="stateSelectDropDown"的下拉列表(选择输入)，然后在您的 javascript(未经测试的代码)中:

<script type="text/javascript">
  $(function() {
    $("#stateSelectDropDown").change(funciton() {
      window.location = "nameOfThisPage.php?state=" + $(this).val();
    });
  }
</script>

对于任何拼写错误或语法错误，我深表歉意，希望这能为您指明正确的方向。