javascript - 如何使用javascript / jquery获取同一项目的文件夹中包含的子文件夹的名称

问题描述

如标题中所述，我必须取项目文件夹中包含的子文件夹的名称

•project
|-JS
   |- •subfolders of "JS" that i need to take name•
|-index.html
|-jquery.js
|-style.css

这是我的目录的方案。“JS”目录中的文件夹数量是动态的，所以我想创建这个文件夹的列表，以便仅使用 javascript 或 jquery 控制我的子项目，但不断出现 CORS 源错误我不知道如何继续

我对我的代码不感兴趣，所以如果你有更好的代码，我会毫不留情地改变它

jQuery.js

$(document).ready(function(){

//function to see if can create HttpObject
function makeHttpObject() {
  try {return new XMLHttpRequest();}
  catch (error) {}
  try {return new ActiveXObject("Msxml2.XMLHTTP");}
  catch (error) {}
  try {return new ActiveXObject("Microsoft.XMLHTTP");}
  catch (error) {}

  throw new Error("Could not create HTTP request object.");
}

console.log(typeof(makeHttpObject()));


var xhr = makeHttpObject();



    xhr.open("GET", "prova_jquery/JS");


    //xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
    xhr.setRequestHeader("Access-Control-Allow-Origin", "*");

//the error comes here
    var text = {"command":"PUSH"};
    xhr.send(text);

console.log(getSubDir());
var filenames=[], foldernames=[];

$.get("file:///prova_jquery/JS",function(response){
    document.write(response);
    getNames();
});


function getNames()
{
    var files = document.querySelectorAll("a.icon.file");
    var folders = document.querySelectorAll("a.icon.dir");
    files.forEach(function(item){filenames.push(item.textContent)})
    folders.forEach(function(item){foldernames.push(item.textContent.slice(0,-1))})
    console.log(filenames);
    console.log(foldernames);
}
    /*var fileNames = new Array();
    $.ajax({
      url: "./JS/",
      success: function(data){
         $(data).find("td > a").each(function(){
            if(openFile($(this).attr("href"))){
                fileNames.push($(this).attr("href"));
            }           
         });
      }
    }); 
    console.log(fileNames);
    /*function openFile(file) {
        var extension = file.substr( (file.lastIndexOf('.') +1) );
        switch(extension) {
            case 'jpg':
            case 'png':
            case 'gif':   // the alert ended with pdf instead of gif.
            case 'zip':
            case 'rar':
            case 'pdf':
            case 'php':
            case 'doc':
            case 'docx':
            case 'xls':
            case 'xlsx':
                return true;
                break;
            default:
                return false;
        }
    };*/
});

//those function are only for test if the list work
function getSubDir()
{
    var loc = window.location.pathname;
    console.log(loc);
    var dir = loc.substring(0, loc.lastIndexOf('/'));
    dir+="/JS";

    var _loc = dir.split("/");

    var dim=_loc.length;
//document.getElementById("programmi").innerHTML += dim + " + ";

    var _dir = _loc.slice(dim - 2, dim);

    var cartella=_dir[0]+"/"+_dir[1];

    //document.getElementById("programmi").innerHTML = "_dir: "+cartella;
    return cartella;
}

function listaProgetti(id)
{
    var _id="#"+id;
    $(_id).append("<br><ul>");
    for(var i=0; i<getSubDir().length; i++)
    {
        $(_id).append( "<li><a href="+getSubDir()+">"+getSubDir()+"</a></li>");
    }
    $(_id).append("</ul>");
}

function dirname(path) {
     return path.match(/.*\//);
}
function basename(path) {
     return path.replace(/.*\//, '');
}

索引.html

<!DOCTYPE html>
<head>
<title>Lista progetti</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="jquery.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

</head>
<body id="home">

<div>Here the list</div>

<p id="programmi" title="programmi">
 <!--this "p" may contain the list-->
<p>

</body>
</html>

这是我得到的错误，我不知道要超越它

CORS 策略已阻止'file:///project/JS'从源访问 XMLHttpRequest ：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。'null'

标签： javascriptjqueryhtmljsonxml

javascript - 如何使用javascript / jquery获取同一项目的文件夹中包含的子文件夹的名称

问题描述

解决方案

推荐阅读