示例AJAX調用不起作用

-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>

來源

2016-05-12 Kervvv

您是否在控制檯中看到錯誤？你是在服務器上運行還是在本地計算機上運行？ –

是的，在我的Chrome控制檯：'未捕獲的ReferenceError：$未定義'的第一行'$（document）.ready（function（）{' – Kervvv

您是否包含jQuery庫？ – Naterade

這是通過AJAX加載遠程文件，並使用.innerHTML()將其加載到你的jQuery選擇的任何元素的便捷功能。

// 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不應該直接訪問你的文件系統。它將嘗試通過http協議請求文件，而無需服務器軟件，只能通過file://協議請求文件。

在互聯網上有很多的話題，但要解決它，你應該安裝一臺服務器。 XAMPP是一個很好的，它是跨平臺。下載它，你的應用程序將在你所有的瀏覽器中運行。當您將其上傳到服務器時，它也可以在您的瀏覽器中工作

來源

2016-05-12 19:40:05

謝謝你的幫助！我還必須在Safari中打開才能看到我的瀏覽器沒有遇到任何問題（請參閱原始問題評論） – Kervvv

@ceuskervin - 我已經更新了答案，並提供瞭解決問題所需的所有相關信息。按我的答案打勾。 :) –

@ Pamblam-感謝您的詳細解答。它工作完美。 – Kervvv

嘗試添加dataType: "text"

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

來源

2016-05-12 19:34:19 Webman

示例AJAX調用不起作用

回答

相關問題