1

.txt ファイルから 1 つのテキストを読み込む jQuery の関数 .load() は知っていますが、div 内に大量の .txt ファイルを読み込む方法はありますか?

私はこれをやろうとしました:

   for (i = 1;i<9;){
      $("#slide2 .wrapper").load(+i+".txt");
      i++;
   };
});

しかし、それはギャラリーを行うために画像で機能しますが、.txtでは機能しません...

私の意図は、.txt ファイルをディレクトリに配置するだけで、HTML に自動的に読み込まれるブログのようなことをすることです。

4

4 に答える 4

1

JavaScript と (拡張による) jQuery はクライアント側の Web テクノロジであり、セキュリティ上の理由から、ユーザーのコンピューター上のローカル ファイルにネイティブにアクセスすることは許可されていません。

.load()そのテキスト ファイルをサーバーに配置し、そのファイルを指す URL を関数に与える必要があります。


ああ、何かが抜けていました...複数のファイルを読み込もうとしているようです...この場合も、サーバー上で魔法を作成することをお勧めします。glob('*.txt')すべてのファイルとfread()それらをループして長いテキストストリームを作成する1つのPHPスクリプトのようなもの...

于 2012-12-17T17:29:24.077 に答える
1

そのようなことを試してください:

for (i = 1;i<9;){
      $.get(+i+".txt", 
            function(res){
               $("#slide2 .wrapper").text($("#slide2 .wrapper").text() + res);//I expect here that you have a plain text in .txt files and want to see it like a text 
           });
      i++;
};

これにより、すべてのファイルが読み込まれ、コンテンツに追加され$("#slide2 .wrapper")ます。

の場合.load、最後にロードされたファイルを取得するのは、その関数がコンテンツをロード中のファイルのコンテンツに置き換えるだけ$("#slide2 .wrapper")だからです。1.txt が 2.txt より前にロードされるという保証はないことに注意してください。2.txt が 1.txt よりも速く読み込まれ、1.txt のコンテンツが 2.txt のコンテンツの後に表示される可能性があります。

注文を維持したい場合は、次のようなコードを使用できます。

   getContent(1);// instead of for loop
});

function getContent(i) {
    $.get(+i+".txt",    
        function(res) {
           $("#slide2 .wrapper").text($("#slide2 .wrapper").text() + res);//I expect here that you have a plain text in .txt files and want to see it like a text          
           if(i < 9)
               getContent(i++);
        }
    );  
}

参考までに: jQuery.get.load

于 2012-12-17T17:45:40.010 に答える
0

PHP についてあまり詳しくないと思いますが、とても簡単なはずです。

  1. 新しいファイルを作成しますが、名前を SomeFile.php にします。
  2. すべての html スクリプトを html ファイルとまったく同じようにコピーしますが、ファイルの内容を読み込もうとするための jQuery を削除します。
  3. これをコードの表示したい場所に直接挿入します。<div>

    <?php 
        for($i=0;$i<9;$i++)
        {
            echo file_get_contents($i.".txt");
        } 
    ?>
    

これは、一般的なホスティング サービスで実行する必要があります。セルフサービスの場合は、サーバーが php 対応であることを確認してください。

于 2012-12-17T18:12:36.403 に答える
0
$(function () {
    for (var i = 1; i < 9; i++) {
        $.ajax({
            url : i + ".txt",
            dataType: "text",
            success : function (data) {
                $("#slide2.wrapper").append(data);
            }
        });
    }
});

あなたのhtmlは次のようになります。

<div id="slide2" class="wrapper"></div>
于 2012-12-17T18:22:01.280 に答える