繁体   English   中英

使用JQuery或Ajax加载.txt文件

[英]Load .txt file using JQuery or Ajax

如何修复下面的脚本,以便它可以每次都工作! 有时它会起作用,有时则不起作用。 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>

试试这个:

var pageExecute = {

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

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

试试这个:

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代码。

这是你的问题:你的主体中有一个脚本标记,它要求输入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就会将结果传递给你给它的成功函数,它将完成它所做的任何事情,或调用它所调用的任何函数。

试试看。 它肯定胜过赛车,看看哪个下载首先。

我建议不要使用url: "./seeds/Ag.txt",直接定位文件。 相反,使用服务器端脚本llike PHP打开文件并以平面格式或JSON格式返回数据。

您可以在此处找到打开文件的教程: http//www.tizag.com/phpT/fileread.php

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM