使用javaScript和ajax将菜单类别动态加载到HTML中[关闭]

Question

有一个餐厅网站，该网络应用程序的首页包含 3 个可点击的图块：菜单、特色菜和地图。如果您单击“特价”图块，您将进入一个类别页面，其中将显示属于“特价”菜单类别的所有菜单项。
我在此作业中的任务是更改此行为，以便当用户单击特价磁贴时，Web 应用程序会将用户带到随机的单一类别菜单页面，列出该类别中的菜单项，无论是“午餐”、“晚餐” ”、“寿司”等。这样，任何随机类别都可以成为特价商品！
大多数辅助功能已经为我编写好了，我只需要执行几行指令并执行在主页上加载随机菜单并访问外部 JSON 文件，其中菜单类别数据组织在使用 get.HTTP 请求单独的脚本文件。

---

我完成所有操作后，index.html 无法加载除 loader.gif 之外的任何内容。我做了我所知道的一切，但似乎还不够，所以我需要你的帮助。 这是关于我的任务的脚本文件的一部分，检查我是否正确执行：

         // On page load (before images or CSS)
document.addEventListener("DOMContentLoaded", function (event) {

  // TODO: STEP 0: Look over the code from
  // *** start ***
  // to
  // *** finish ***
  // below.
  // We changed this code to retrieve all categories from the server instead of
  // simply requesting home HTML snippet. We now also have another function
  // called buildAndShowHomeHTML that will receive all the categories from the server
  // and process them: choose random category, retrieve home HTML snippet, insert that
  // random category into the home HTML snippet, and then insert that snippet into our
  // main page (index.html).
  //
  // TODO: STEP 1: Substitute [...] below with the *value* of the function buildAndShowHomeHTML,
  // so it can be called when server responds with the categories data.

  // *** start ***
  // On first load, show home view
  showLoading("#main-content");
  $ajaxUtils.sendGetRequest(
    allCategoriesUrl,
    [buildAndShowHomeHTML],
    // ***** <---- TODO: STEP 1: Substitute [...] ******
    true); // Explicitly setting the flag to get JSON from server processed into an object literal
});
// *** finish **


// Builds HTML for the home page based on categories array
// returned from the server.
function buildAndShowHomeHTML(categories) {

  // Load home snippet page
  $ajaxUtils.sendGetRequest(
    homeHtmlUrl,
    function (homeHtml) {

      // TODO: STEP 2: Here, call chooseRandomCategory, passing it retrieved 'categories'
      // Pay attention to what type of data that function returns vs what the chosenCategoryShortName
      // variable's name implies it expects.
      // var chosenCategoryShortName = ....
      var chosenCategoryShortName = chooseRandomCategory(categories).short_name;


      // TODO: STEP 3: Substitute {{randomCategoryShortName}} in the home html snippet with the
      // chosen category from STEP 2. Use existing insertProperty function for that purpose.
      // Look through this code for an example of how to do use the insertProperty function.
      // WARNING! You are inserting something that will have to result in a valid Javascript
      // syntax because the substitution of {{randomCategoryShortName}} becomes an argument
      // being passed into the $dc.loadMenuItems function. Think about what that argument needs
      // to look like. For example, a valid call would look something like this:
      // $dc.loadMenuItems('L')
      // Hint: you need to surround the chosen category short name with something before inserting
      // it into the home html snippet.

      // var homeHtmlToInsertIntoMainPage = ....


      var homeHtmlToInsertIntoMainPage = insertProperty(homeHtml, 'randomCategoryShortName', '\'' + chosenCategoryShortName + '\'');
      // TODO: STEP 4: Insert the produced HTML in STEP 3 into the main page
      // Use the existing insertHtml function for that purpose. Look through this code for an example
      // of how to do that.
      // ....
      insertHtml("#main-content", homeHtmlToInsertIntoMainPage);

    },
    false); // False here because we are getting just regular HTML from the server, so no need to process JSON.
}

---

来自 Chrome 开发者工具控制台的错误消息：

无法加载>资源：net::ERR_CONNECTION_RESET

或

跨源请求>已阻止：同源策略不允许读取远程资源>位于https://.. ..

看起来又回到了这个片段：

    ajax.utils.js

        ``// Makes an Ajax GET request to 'requestUrl'
ajaxUtils.sendGetRequest =
  function (requestUrl, responseHandler, isJsonResponse) {
    var request = getRequestObject();
    request.onreadystatechange =
      function () {
        handleResponse(request,
          responseHandler,
          isJsonResponse);
      };
    request.open("GET", requestUrl, true);
    request.send(null); // for POST only
  };
``

---

链接到存储库

网站链接