基于导航菜单ajax加载json/mysql内容列表？

Question

所以我有一个资源列表或联系信息，每个“专业”都有很多。

在左侧导航菜单上，我想创建一个“专业”列表，当点击该专业时，相关联系信息列表将显示在内容区域。

听起来很简单，但我是初学者，正在寻找正确/最有效的方法来完成此任务。

这是源数据的样子（哪个更好？csv/json/mysql）

Table: people
┌────┬────────────────────┬─────────┬───────────┐─────────┐
| id | specialty| name    | phone   | url       | address |
├────┼────────────────────┼─────────┤───────────┐─────────┐
| 0  | One     | this     | blah    | www.x.com | 123 a st
| 1  | One     | that     | blah    | www.x.com | 123 b st
| 2  | One     | there    | blah    | www.x.com | 123 c st
| 3  | Two     | the      | blah    | www.x.com | 123 d st
| 4  | Two     | other    | blah    | www.x.com | 123 e st
└────┴────────────────────┴─────────┘───────────┘─────────┘

这是一个基本布局的 JFIDDLE：JSFIDDLE

所以我已经完成了数据和布局，但在以正确（最简单）的方式实施时完全丢失了。

非常感谢所有帮助 :) 谢谢

Answer 1

我会这样做：

菜单 HTML 应该是空的（ul 中没有 li 项），您将从 JS 填充它。

遍历数据数组，获得不同的特长：

var specialties = [], x;
for (x = 0; x < sampleData.length; ++x)
{
    if ($.inArray(sampleData[x].specialty, specialties) < 0)
        specialties.push(sampleData[x].specialty);
}

为每个专业创建一个 li 元素并将其附加到 ul。此 li 元素会将专业名称存储在自定义 data-specialty 属性中，并将附加一个 onclick 事件：

var ul = $("#menu");
  for (x = 0; x < specialties.length; ++x)
  {
    var li = $(document.createElement("li"));
    li.addClass("list-group-item");
    li.attr("data-specialty", specialties[x]);
    li.html(specialties[x]);
    li.on("click", specialtyClicked);
    ul.append(li);
  }

onclick 函数遍历数据数组并使用该专业的专家生成 HTML，然后将该 HTML 代码注入#contacts div：

function specialtyClicked()
{
    // Remove active attribute from all menu items and add it to this one
  $(".list-group-item").removeClass("active");
  $(this).addClass("active");

    // Get the specialty name
    var specialty = $(this).attr("data-specialty");

  // Create the HTML for the specialists
  var output = "<h2>" + specialty + "</h2><br/>";
  for (x = 0; x < sampleData.length; ++x)
  {
    var s = sampleData[x];
    if (s.specialty != specialty)
        continue;

    output += "<h4>" + s.name + "</h4><p>" + s.address + "<br/>" + s.phone + " - " + s.url + "</p>";
  }
  $("#contacts").html(output);
}

这是一个完整的工作注释示例：https://jsfiddle.net/Lvq8a9me/8/ 我认为当您看到代码时更容易理解。