jquery-function 不显示任何内容答案

【问题标题】：jquery-function doesn't show anythingjquery-function 不显示任何内容
【发布时间】：2012-04-05 10:01:41
【问题描述】：

我正在尝试创建一个随机生成器，如果在另一个页面上找到提示，使用 jQuery 会很容易，所以我尝试了以下操作。

<html>
 <head>
  <title>hello</title>
 </head>
 <body>
  <script type="text/javascript">
   $ (document).ready(function() {
    $("body").load("hello.txt", function(msg) {
        var textArray = msg.split("\n");
    var zufall = Math.round ( ( textArray.length - 1 ) * ( Math.random() ) );
    });
   });
   document.write('<p>' + textArray[zufall] + '</p>');
  </script>
 </body>
</html>

它应该像这样工作：它加载一个包含多行文本的文档，并在换行时将其拆分。这应该存储在一个数组中，并且应该在网站上显示一条随机线。

我的第一个想法是将文本直接写入数组，但我认为加载它对网站来说会更有效。

感谢回复

PS：当浏览器运行时，并没有像“此页面出错”这样的错误消息。

最终编辑：

感谢您的帮助！！！现在可以了。

解决办法如下：

<html>
    <head>
        <title>hello</title>
    </head>
    <body>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
            <script type="text/javascript">
            $ (document).ready(function() {
                 $.get("hello.txt", function(msg) {
                    var textArray = msg.split("\n");
            var zufall = Math.round ( ( textArray.length - 1 ) * ( Math.random() ) );

            $('body').append('<p>' + textArray[zufall] + '</p>');
                });
            });
        </script>
    </body>
</html>

【问题讨论】：

你没有包含 jquery 文件。
你的意思是这样的一行代码吗？
是的，你的 jquery 文件在哪

标签： javascript jquery

【解决方案1】：

您需要将 document.write() 放入您的 function(msg) 中，因为 AJAX 是异步的，而 load 正在使用 AJAX，因此 document.write() 不会等到 load 完成调用您的匿名函数后

   $(document).ready(function() {
    $.get("hello.txt", function(msg) {
        var textArray = msg.split("\n");
        var zufall = Math.round ( ( textArray.length - 1 ) * ( Math.random() ) );
        $('body').append('<p>' + textArray[zufall] + '</p>');
    });
   });

编辑：

我刚刚注意到您没有包含您的 jquery 库 o_O

在<script>上方添加以下内容

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

【讨论】：

你不应该在回调中使用 document.write。如果在 DOM 加载完成后执行 document.write，它将覆盖整个页面。

【解决方案2】：

试试这个替代解决方案

$(document).ready(function() {
    $.ajax({ 
        url: "hello.txt",
        type: "GET",
        dataType: "text",
        success: function(data) {
            textArray = data.split("\n");
            zufall = Math.round ( ( textArray.length - 1 ) * ( Math.random() ) );
             document.write('<p>' + textArray[zufall] + '</p>');
        }
    });
});

还要确保您已包含 jquery 文件。

【讨论】：

【解决方案3】：

NiftyDude 是正确的，您将 document.write 调用置于 document.ready 函数的范围之外。另外：

使用 document.write 也几乎总是一个坏主意。在这种情况下，您在使用之前等待 AJAX 调用完成，这意味着您保证 document.write 将覆盖整个页面正文。
您正在使用 $('body').load，在这种情况下这是不合适的 - 您将手动将文本添加到正文。

这里有一个修复：

<html>
 <head>
  <title>hello</title>
 </head>
 <body>>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
   $(document).ready(function() {
    $.get("hello.txt", function(msg) {
        var textArray = msg.split("\n");
        var zufall = Math.round ( ( textArray.length - 1 ) * ( Math.random() ) );
        $('body').append('<p>' + textArray[zufall] + '</p>');
    });
   });
  </script>
 </body>
</html>

【讨论】：

感谢您的提示！！它现在也快得多并且工作正常，但现在它首先打印整个数组。
听起来你可能没有用 $.get 替换你的 $('body').load。