使用JQuery或Ajax加載.txt文件

Question

如何修復下面的腳本，以便它可以每次都工作！ 有時它會起作用，有時則不起作用。 Pro JQuery解釋了導致這種情況的原因，但它沒有討論如何修復它。 我幾乎肯定它與ajax就緒狀態有關，但我不知道如何寫它。 網絡顯示了大約99種不同的方式來編寫ajax和JQuery，它有點壓倒性。

我的目標是創建一個HTML shell，可以使用基於服務器的文本文件填充文本。 例如：假設在名為AG的服務器上有一個文本文件，其內容為PF：PF-01，PF-02，PF-03等。我想提取此信息並填充HTML DOM之前用戶看到。 A是@＃！＃$ *＆Golden with 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>

Answer 1

試試這個：

var pageExecute = {

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

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

Answer 2

試試這個：

HTML：

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

JavaScript的：

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

在我的例子中，div將填充文件內容。 看一下jQuery .load()函數。

“pathToYourFile”可以是包含您要加載的數據的任何資源。 有關如何使用它的更多信息，請查看加載方法文檔。

編輯：獲取要操作的值的其他示例

使用$.get()函數 ：

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

使用$.ajax()函數 ：

$(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代碼。

Answer 3

這是你的問題：你的主體中有一個腳本標記，它要求輸入AJAX數據。 即使你要求它將數據寫入你的shell，而不是只是噴出它......這是你的第一個問題。

原因如下：

AJAX是異步的。 好的，我們已經知道了，但這意味着什么？

嗯，這意味着它將轉到服務器並要求提供文件。 服務器將繼續查找，並將其發送回去。 然后你的電腦將下載內容。 當內容100％下載時，它們將可供使用。

......事情是......

你的程序不是在等待這種情況發生。 它告訴服務器花時間，同時它會繼續做它正在做的事情，並且它不會再考慮內容，直到它從服務器接到電話。

嗯，在渲染HTML時，瀏覽器真的很快。 服務器在提供靜態（純文本/ img / css / js）文件時也非常快。

所以現在你正在參加比賽。 哪個會先發生？ 服務器是否會使用文本回調，或者瀏覽器是否會點擊要求提供文件內容的腳本標記？

無論哪一個在刷新上獲勝都是將要發生的。

那你怎么解決這個問題呢？ 回調。

回調是一種不同的思維方式。 在JavaScript中，通過在下載完成時為AJAX調用提供要使用的函數來執行回調。

這就像是從工作線上打電話給某人，然后說：當你得到我的回答時，撥打這個擴展來聯系我。

在jQuery中，您將在AJAX調用中使用名為“success”的參數。 success : function (data) { doSomething(data); } success : function (data) { doSomething(data); }您傳遞到AJAX調用該對象的一部分。 當文件下載時，一旦下載，jQuery就會將結果傳遞給你給它的成功函數，它將完成它所做的任何事情，或調用它所調用的任何函數。

試試看。 它肯定勝過賽車，看看哪個下載首先。

Answer 4

我建議不要使用url: "./seeds/Ag.txt",直接定位文件。 相反，使用服務器端腳本llike PHP打開文件並以平面格式或JSON格式返回數據。

您可以在此處找到打開文件的教程： http ： //www.tizag.com/phpT/fileread.php