web-dev-qa-db-ja.com

JQueryまたはAjaxを使用して.textファイルをロードする

毎回機能するように、以下のスクリプトを修正するにはどうすればよいですか？時には機能する場合もあれば、機能しない場合もあります。 Pro JQueryが原因を説明していますが、修正方法については説明していません。私はそれがajaxの準備完了状態に関係しているとほぼ確信していますが、それをどのように書くのか分かりません。 Webでは、約99種類のAjaxとJQueryの作成方法を示していますが、これは少し圧倒的です。

私の目標は、サーバーベースのテキストファイルのテキストを入力できるHTMLシェルを作成することです。たとえば、AGという名前のサーバーにテキストファイルがあり、そのコンテンツがPF：PF-01、PF-02、PF-03などであるとします。ユーザーに表示されます。 AはPHPで@＃！＃$ *＆ゴールデンでしたが、ホストがfopen（）を停止していることがわかりました。だからここにいる。

ご協力ありがとうございます。

JS-plantSeed.js

var pageExecute = {

fileContents:"Null",
pagePrefix:"Null",
slides:"Null",

init:function () {
    $.ajax({
      url: "./seeds/Ag.txt",
      success: function (data){
            pageExecute.fileContents = data;
      }
});
}
};

HTML-HEAD

<script type="text/javascript">
    pageExecute.init();
</script>

HTML-BODY

<script type="text/javascript"> alert(pageExecute.fileContents); </script>
javascriptajaxjquerytext-files
10
atomSmasher

これを試して：

var pageExecute = {

    fileContents:"Null",
    pagePrefix:"Null",
    slides:"Null",

    init: function () {
        $.ajax({
            url: "./seeds/Ag.txt",
            async: false,
            success: function (data){
                pageExecute.fileContents = data;
            }
        });
    }
};
12
Novak

これを試して：

HTML：

_<div id="target"></div>
_

JavaScript：

_$(function(){
    $( "#target" ).load( "pathToYourFile" );
});
_

この例では、divにファイルの内容が入力されます。 jQuery .load() functionを見てください。

「pathToYourFile」には、ロードするデータを含む任意のリソースを指定できます。使用方法の詳細については、ロードメソッドのドキュメントをご覧ください。

編集：操作する値を取得する他の例

$.get() function ：を使用

_$(function(){
    $.get( "pathToYourFile", function( data ) {
        var resourceContent = data; // can be a global variable too...
        // process the content...
    });
});
_

$.ajax() function ：を使用

_$(function(){
    $.ajax({
        url: "pathToYourFile",
        async: false,   // asynchronous request? (synchronous requests are discouraged...)
        cache: false,   // with this, you can force the browser to not make cache of the retrieved data
        dataType: "text",  // jQuery will infer this, but you can set explicitly
        success: function( data, textStatus, jqXHR ) {
            var resourceContent = data; // can be a global variable too...
            // process the content...
        }
    });
});
_

次のことに注意することが重要です。

_$(function(){
    // code...
});
_

次と同じです：

_$(document).ready(function(){
    // code
});
_

また、DOMでJavaScriptコードを実行できるようにするため、通常はこの構文を使用する必要があります。

10
davidbuzatto

問題は次のとおりです。本文にscriptタグがあり、AJAXデータを要求しています。単にデータを吐き出すのではなく、シェルにデータを書き込むように要求していても... ...それがあなたの一番の問題です。

その理由は次のとおりです。

AJAXは非同期です。さて、私たちはすでにそれを知っていますが、それはどういう意味ですか？

まあ、それはサーバーに行ってファイルを要求することを意味します。サーバーは検索を行い、それを送り返します。その後、コンピューターがコンテンツをダウンロードします。コンテンツが100％ダウンロードされると、使用できるようになります。

...ものは...

あなたのプログラムはそれが起こるのを待っていません。サーバーに時間をかけるように指示し、その間はサーバーが実行することを続け、サーバーからの呼び出しを取得するまで、コンテンツについて再度考えません。

さて、HTMLのレンダリングに関しては、ブラウザは本当に高速です。サーバーは、静的（plain-text/img/css/js）ファイルの処理も非常に高速です。

だから今、あなたはレース中です。どちらが最初に起こりますか？サーバーはテキストでコールバックしますか、それともブラウザはファイルの内容を尋ねるスクリプトタグをヒットしますか？

その更新で勝つものは、起こるものです。

どうやってそれを回避するのですか？コールバック。

コールバックは別の考え方です。 JavaScriptでは、ダウンロードが完了したときに、AJAX呼び出しに使用する関数を指定して、コールバックを実行します。

それは、ワークラインから誰かに電話をかけて、「私に返事があったら、この内線番号をダイヤルして私に連絡してください」というようなものです。

JQueryでは、AJAX呼び出しで「success」というパラメーターを使用します。 success : function (data) { doSomething(data); }をAJAX呼び出しに渡すオブジェクトの一部にします。ファイルがダウンロードされると、jQueryは結果をダウンロードするとすぐに、指定した成功関数に結果を渡します。成功関数は、実行された処理を実行するか、実行された関数を呼び出します。

試してみる。どのダウンロードが最初に表示されるかは、レースに勝るものです。

2
Norguard

ファイルを直接ターゲットにするには、url: "./seeds/Ag.txt",を使用しないことをお勧めします。代わりに、サーバー側スクリプトllike[〜＃〜] php [〜＃〜]を使用して、ファイルを開き、プレーン形式でデータを返します。またはJSON形式。

ここでファイルを開くためのチュートリアルがあります： http://www.tizag.com/phpT/fileread.php

1
blasteralfred Ψ