html - 如何用 HTML 和 JavaScript/JQuery 替换数据库以创建动态相关的下拉选择列表？

Question

大家新年快乐

首先要说明的是:我不是网络程序员。我知道一些 HTML，我可以剪切和粘贴一些 Javascript 示例以使基本功能正常工作，但仅此而已。我既不知道也没有得到老板的支持，也没有时间使用数据库来获得任何面向 PHP 的东西，所以我被静态 HTML 和 Javascript 困住了......我没有乐趣。

我在网页上有 4 个选择框，其中选定的值构成服务器上要检索的 html 页面的名称。我有一个日期、一个地区、一个家庭和一个名字。对于每个日期，内容基本上都不同。如前所述，我无法访问数据库来帮助插入这一点，而且有太多的数据无法在 Javascript 中保存数组中的排列。

我希望我能做的是创建内部包含 html 的文件以提供框的内容，例如将数据库解压缩到文件中。然后当我选择一个日期时，这个日期被用作一个变量，成为文件名的一部分:

选择日期:120101

...从文件加载选择框...

> region_120101.txt/xml/js/whatever: 
A
B
C

> family_A_120101.txt
X
Y
Z

> family_name_A_120101.txt
Name1
Name2

如果每个选择框的第一个都被选中，并且所有的选择框都有值，则显示A_X_Name1_120101.html。如果该组合没有文件，则消息会有所帮助。

如果发现区域 A 的磁盘上没有文件，那么我想向用户显示一条消息，说明该区域是空的。如果 Family 或 Name 没有可用内容，则相同。

有人知道如何解决这个问题吗？ JavaScript 的 innerHTML 是答案吗？这真的应该是 JQuery 吗？当文件在服务器上不存在时，我该如何解决错误捕获问题？

任何能帮助我开始的人都将不胜感激!

Answer 1

嗯，关于 HTML 和 REST 的有趣部分是一切都是资源，无论数据是动态生成的还是静态文件都无关紧要，这一切都归结为 HTTP 请求。

特别是虽然平面文件可以工作，但在文件中使用 JSON (http://json.org) 并使用 jQuery 加载它们应该更容易。您可能必须在服务器上正确设置 MIME 类型，但这取决于浏览器以及您解析文件的方式。

你的目录结构:

/data/regions.json
/data/family.json
/data/familynames.json

第一个文件(/data/regions.json):

[
    {"value":"A", "caption":"A"},
    {"value":"B", "caption":"B"},
    {"value":"C", "caption":"C"}
]

为了与 IE 兼容，不要在最后一个条目后加上逗号。

选择:

<select id="regions"></select>

现在是代码，假设 jQuery 已经包含在页面中:

$(document).ready(function(){

    $.getJSON('/data/regions.json', function(results) {

        var el = $('#regions');
        $(el).empty(); // or $(el).not(':first-child').remove(); if you have -- please select 
        // region -- or whatever placeholder

        $.each(results, function(r,idx) {
            $(el).append('<option value="'+r.value+'">'+r.caption+'</option>');
        });
    });
});

稍后您可以将其转换为 PHP 或 ASP.net 或其他任何内容，而无需真正更改客户端，可能 url 除外。