2016-05-12 18 views
-1

簡単なAJAXコールを試みています(自分自身を教えてください)。 htmlと同じフォルダに.txtというファイルがあります。私はここで間違って何をしていますか?ありがとう。サンプルAJAXコールが機能しない

<html> 
    <head> 
     <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#poo").submit(function(e){ 
       e.preventDefault(); //stop submit 
       $.ajax({ 
        type: "GET", 
        url: "data.txt", 
        data: "", 
        success: function(data){ 
         $("#foo").html(data); 
         document.getElementById("foo").style.display = 'block'; 
         alert('hey'); 
        } 
       }); 
      }); 
     }); 
    </script> 
    </head> 
    <body> 
     <form id="poo"> 
      <input type="text"> </input> 
      <input type="submit"> </input> 
     </form> 
      <br> 
      <br> 
      <div style='display: none;'> 
      <p id="foo">this shows</p> 
      </div> 
      <a href="page.html">Start Over</a> 


    </body> 
    </head> 
</html> 
+0

あなたのコンソールに何かエラーがありますか?これはサーバーで実行しているのですか、ローカルのコンピュータだけで実行していますか? –

+0

はい、私のクロムコンソールで: '$(ドキュメント).ready(function(){' – Kervvv

+0

のjQueryライブラリを含めていますか? – Naterade

答えて

1

を追加しよう。関連

// Does the exact same thing as the entire block of code you wrote.. 
// These jQuery methods are chainable so you can do this in 1 statement. 

$("#foo")    // Contains the DOM reference, 
         // so no need to use getElementById(). 
    .load("data.txt") // Loads "data.txt" into "#foo". 
    .show();    // Makes "#foo" visible. 


、あなたには、いくつかの他の問題がありました。

jQueryが読み込まれているかどうかわからないと言われました。 jQueryはちょうどjavascriptなので、<script></script>タグに含めるようにしてください。最も簡単な方法はjQuery's CDNです。リンクをクリックし、必要なバージョンとフォーマットを選択します。スクリプトタグを含むポップアップが表示されます。ページにコピーしてください。ページにある他のJavascriptの前にコピーすることをお勧めします。使用するバージョン/フォーマットがわからない場合は、v1.x、を削除してください。


ローカルで実行していたとお伝えしました。問題は、Javascriptがあなたのファイルシステムに直接アクセスしていないことです。サーバーソフトウェアを使用せずに、file://プロトコルでファイルを要求できるだけで、httpプロトコルでファイルを要求しようとします。

これはインターネット上では数多くのトピックがありますが、それを解決するにはサーバーをインストールする必要があります。 XAMPPはいいですし、クロスプラットフォームです。これをダウンロードすると、すべてのブラウザでアプリケーションが動作します。あなたのブラウザでもそれをサーバにアップロードすると、あなたのブラウザで動作します

+0

ありがとうございました!また、私のブラウザから問題が発生しないようにSafariで開く必要がありました。 – Kervvv

+0

@ceuskervin - 私はあなたの問題を解決するために必要なすべての関連情報を使って答えを更新しました。私の答えでチェックマークを押す。 :) –

+0

@パムブラーム - あなたの詳細な答えに感謝します。それは完全に働いた。 – Kervvv

0

これは、AJAXを経由してリモートファイルをロードし、あなたのjQueryのセレクタ内の任意の要素にそれをロードするために.innerHTML()を使用する便利な関数ですdataType: "text"

$.ajax({ 
    type: "GET", 
    url: "data.txt", 
    dataType: "text", 
    success: function(data){ 
     $("#foo").html(data); 
     document.getElementById("foo").style.display = 'block'; 
     alert('hey'); 
    }) 
関連する問題