jquery - 加载所有文本文件并显示它们

时间:2012-12-21 12:06:09

标签: ajax jquery

我一直在使用jQuery很长时间,但我从来没有学过AJAX,所以我来了..

我们有这个代码:

$('body').load('hello.txt');

很简单,现在让我说我有多个文本文件(我不知道他们的名字)我想加载,
我能这样做吗? 也许我需要循环所有文本文件并以某种方式加载它们?

先谢谢

4 个答案:

答案 0 :(得分:6)

假设您在特定位置的服务器中有文本文件,则可以执行以下操作:

HTML标记:

 <div id="fileList">
       here list of files will be loaded so that user can select which one to load
 <div>

 <div id="file-content">
       content of selected file will be loaded here
 <div>

JQuery部分:

 $.ajax({
      url : "FileServer/GetFileNames", // this is just a url that is responsible to return files list 
      success : function(data){
          //here a JSON data including filenames expected 
          $.each(data,function(i,item){
                var $fileHolder = $("<div></div>");
                $fileHolder.attr("filename",item.filename).click(function(){
                      $("#file-content").load($(this).attr("filename"));
                }).html(item.filename).appendTo("#fileList");  
          });
      }
 });

预期的JSON结构

   [
      {
          filename : "text1.txt"
      },
      {
          filename : "text2.txt"
      },
      {
          filename : "text3.txt"
      } 
   ]

在服务器端实现文件列表取决于您。

答案 1 :(得分:3)

  

Javascript无法访问本地文件系统   安全原因。这是不可能的。

     

除非您尝试循环访问服务器上的文件,否则   不管怎么说你不想使用jQuery但是像ASP.NET那样   或PHP或您正在使用的任何框架。

Foreach file in directory jQuery

<强>更新

试试这个

var files;
$.ajax({
    url: "http://homepage/folder",
    success: function (txt) {
        files = txt.split('<A href="');
    }
});
var fList = new Array();
$(files).each(function () {
    if (this.indexOf('.txt') > -1) {
        fList.push(this);
    }
});
for (i = 0; i < fList.length; i++) {
    fList[i] = fList[i].split('">')[0];
    fList[i] = fList[i].replace('"');
}

for (i = 0; i < fList.length; i++) {
    $('#idLoadHere').load(fList[i]);
}

答案 2 :(得分:0)

看一下这个链接JQFAQ.com,这里有一个加载所有文件的答案,并且该网站上还有更多常见问题解答。

答案 3 :(得分:0)

  • 运行FTP列表命令(有多种方法可以执行此操作,Web-Sockets是一个...)
  • 一个更简单,更常见的安全解决方案是文件的服务器端列表,并“烹饪”HTML (意味着 - 在其中嵌入文件列表)

*您可以使用原始HTML或将其放在var语句中以供JavaScript使用(例如)。

见以下答案:

https://stackoverflow.com/a/30949072/257319