基于nav菜单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元素将专业名称存储在自定义数据专业属性中，并附加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/我认为当你看到代码时更容易理解。