11

如何修复下面的脚本，使其每次都能正常工作！有时它有效，有时则无效。Pro JQuery解释了造成这种情况的原因，但没有谈到如何解决它。我几乎肯定它与 ajax 就绪状态有关，但我不知道如何编写它。网上展示了大约 99 种不同的 ajax 和 JQuery 编写方式，这有点让人不知所措。

我的目标是创建一个 HTML shell，可以填充来自基于服务器的文本文件中的文本。例如：假设服务器上有一个名为 AG 的文本文件，其内容为 PF：PF-01、PF-02、PF-03 等。我想提取此信息并在 HTML DOM 出现之前填充它被用户看到。A 在 PHP 中是 @#!#$*& 金色，然后发现我的主机关闭了 fopen()。所以我在这里。

谢谢你的帮助。

JS - 植物种子.js

var pageExecute = {

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

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

HTML - 头部

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

HTML - 正文

<script type="text/javascript"> alert(pageExecute.fileContents); </script>
4

4 回答 4

13

试试这个：

var pageExecute = {

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

    init: function () {
        $.ajax({
            url: "./seeds/Ag.txt",
            async: false,
            success: function (data){
                pageExecute.fileContents = data;
            }
        });
    }
};
于 2012-07-21T04:30:01.047 回答
12

试试这个：

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

于 2012-07-21T04:16:54.733 回答
3

这是您的问题：您在正文中有一个脚本标签，它要求 AJAX 数据。即使您要求它将数据写入您的外壳，而不仅仅是喷出它... ...那是您的第一个问题。

原因如下：

AJAX 是异步的。好的，我们已经知道了，但这意味着什么？

好吧，这意味着它将去服务器并请求文件。服务器将去寻找，并将其发送回来。然后您的计算机将下载内容。当内容 100% 下载后，它们将可供使用。

……事情是……

您的程序不会等待这种情况发生。它告诉服务器慢慢来，同时它会继续做它正在做的事情，并且不会再考虑内容，直到它收到来自服务器的调用。

好吧，浏览器在渲染 HTML 时真的非常快。服务器在提供静态（纯文本/img/css/js）文件方面也非常快。

所以现在你在比赛中。哪个会先发生？服务器会用文本回调，还是浏览器会点击询问文件内容的脚本标签？

无论哪一个在刷新中获胜，都会发生。

那么你如何解决这个问题呢？回调。

回调是一种不同的思维方式。在 JavaScript 中，当下载完成时，您通过给 AJAX 调用一个要使用的函数来执行回调。

这就像从工作线上给某人打电话，然后说：当你有我的答案时，拨打这个分机来联系我。

在 jQuery 中，您将在 AJAX 调用中使用一个名为“success”的参数。将success : function (data) { doSomething(data); }您传递给 AJAX 调用的该对象的一部分。当文件下载时，一旦下载，jQuery 就会将结果传递给你给它的成功函数，它会做它要做的任何事情，或者调用它要调用的任何函数。

试试看。它肯定会比赛车先看看哪些下载。

于 2012-07-21T04:33:41.550 回答
1

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

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

于 2012-07-21T04:18:28.067 回答