Question

我在Vanilla Javascript中设置了一个ajax请求，以从JSON文件（nav.json）提取用于导航的数据。我有正确的路径，但在控制台中不断收到404 not found错误。这是JavaScript：

function init() {
// Create a new AJAX object
var ajax = new XMLHttpRequest;

// Check if the AJAX object is ready and execute logic
ajax.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {

        console.log('Nav ready...');

        // Parse data into a useable JavaScript object
        var ajaxResponse = JSON.parse(this.responseText);

        // Start buildilng DOM elements with the parsed data 
        // for both desktop and mobile
        var createDesktopMenu = document.getElementById('build-desktop-nav');
        var createMobileMenu = document.getElementById('nav__menu');

        var desktopNav = document.createElement('ul');
        var mobileNav = document.createElement('ul');

        createDesktopMenu.appendChild(desktopNav);
        createMobileMenu.appendChild(mobileNav);

        // Loop through the menu data in the JSON and 
        // for every element found create all DOM elements
        // to build the main menu and sub menu items
        for (i in ajaxResponse.items) {

            // The main menu DOM elements
            var createDesktopListItem = document.createElement('li');
            var createMobileListItem = document.createElement('li');
            var createDesktopLink = document.createElement('a');
            var createMobileLink = document.createElement('a');

            var menuDesktopLabel = ajaxResponse.items[i].label;
            var menuMobileLabel = ajaxResponse.items[i].label;
            var menuDesktopURL = ajaxResponse.items[i].url;
            var menuMobileURL = ajaxResponse.items[i].url;
            var createDesktopAnchorText = document.createTextNode(menuDesktopLabel);
            var createMobileAnchorText = document.createTextNode(menuDesktopLabel);

            createDesktopLink.href = menuDesktopURL;
            createMobileLink.href = menuMobileURL;
            createDesktopLink.title = menuDesktopLabel;
            createMobileLink.title = menuMobileLabel;

            // Finally build the main menu from all the DOM elements created above
            desktopNav.appendChild(createDesktopListItem).appendChild(createDesktopLink).appendChild(createDesktopAnchorText);
            mobileNav.appendChild(createMobileListItem).appendChild(createMobileLink).appendChild(createMobileAnchorText);

            // However, we also have to check if there are sub menu items and
            // if there are loop through all the sub menu items in the JSON
            if (ajaxResponse.items[i].items.length > 1) {

                // Create the sub menu DOM elements
                var createDesktopSubDiv = document.createElement('div');
                var createMobileSubDiv = document.createElement('div');
                createDesktopSubDiv.className += 'dropdown hidden';
                createMobileSubDiv.className += 'dropdown hidden';
                createDesktopLink.classList.add('submenu')
                createMobileLink.className += 'submenu chevron';

                // Now loop through the sub menu items
                for (j in ajaxResponse.items[i].items) {

                    // The sub menu DOM elements to build
                    var createDesktopSubLink = document.createElement('a');
                    var createMobileSubLink = document.createElement('a');

                    var submenuDesktopLabel = ajaxResponse.items[i].items[j].label;
                    var submenuMobileLabel = ajaxResponse.items[i].items[j].label;

                    var submenuDesktopURL = ajaxResponse.items[i].items[j].url;
                    var submenuMobileURL = ajaxResponse.items[i].items[j].url;

                    var createDesktopSubAnchorText = document.createTextNode(submenuDesktopLabel);
                    var createMobileSubAnchorText = document.createTextNode(submenuMobileLabel);
                    createDesktopSubLink.title = submenuDesktopLabel;
                    createMobileSubLink.title = submenuMobileLabel;
                    createDesktopSubLink.href = submenuDesktopURL;
                    createMobileSubLink.href = submenuMobileURL;

                    // Append anchor text to the sub-menu link
                    createDesktopSubLink.appendChild(createDesktopSubAnchorText);
                    createMobileSubLink.appendChild(createMobileSubAnchorText);
                    // Append completed sub-menu link to the DIV
                    createDesktopSubDiv.appendChild(createDesktopSubLink);
                    createMobileSubDiv.appendChild(createMobileSubLink);
                    // Append the DIV to the dropdown sub-class
                    createDesktopListItem.append(createDesktopSubDiv);
                    createMobileListItem.append(createMobileSubDiv);
                }


            }


        }
        toggleDropdown();

    } 

};

    ajax.open('GET', '../data/nav.json', true);
    ajax.send();

   }

   }

 init();

有人知道我如何摆脱这个错误吗？我已经多次更改了路径信息，甚至更改了文件夹，但无济于事。

Answer 1

检查您的项目文件夹结构。如果确定一切正常，请尝试检查是否没有 .htaccess

如何在不出现404错误的情况下访问其他目录中的本地json文件？

1 个答案: