Question

问题

我的目标是能够将文本文档中的文本加载到<textarea>中，以便在屏幕上显示给用户。 $ .get（）调用能够检索内容，并且似乎将它们存储在＆＃39;注释中。全局变量，但是当使用＆＃39; notes＆＃39;来调用.val（）时传递给它，它似乎没有加载要在<textarea>中显示的字符串。

我已经阅读过几篇关于Stackoverflow和Google上其他文章的问题，但到目前为止我还没有找到任何解决方案。有没有人有任何建议？

HTML

<div class="col-md-5 module">
   <h1>My Notes</h1>
   <form>
      <textarea id="note-app" class="full-width full-height" placeholder="Save your notes here..."></textarea>
   </form>
</div>

notes.js

var notes = "pie";

$.get("../docs/notes.txt", function (data) {
    console.log('Loading notes...');
    notes = data;
});


function loadNotes(data) {
    console.log('Data:\n{\n'+data+'\n}\n');
    $("#note-app").val(data);
}

$( document ).ready(loadNotes(notes));

输出

notes.js:14
Data:
{
pie
}

jquery.min.js:4 XHR finished loading: GET
"http://localhost:63342/Dad/docs/notes.txt".k.cors.a.crossDomain.send @
jquery.min.js:4n.extend.ajax @ jquery.min.js:4n.(anonymous function) @
jquery.min.js:4(anonymous function) @ notes.js:7
notes.js:8 Loading notes...

Answer 1

有几件事......

$( document ).ready(loadNotes(notes));立即调用loadNotes，而不是等待文档准备就绪。您可以通过省略()来传递函数 - 但您只需调用它。

当$.get被触发时，您的loadNotes来电可能仍在运行。使用回调 - 等待完成 - 然后运行loadNotes

重构：

function getNotes(callback) {
    $.get("../docs/notes.txt", function (data) {
        console.log('Loading notes...');
        callback(data);
    });
}

function loadNotes() {
    getNotes(function(notes) {
        $("#note-app").val(notes);
    });
}

$(document).ready(loadNotes);

Answer 2

$( document ).ready(loadNotes(notes));

应该是

$( document ).ready(function() { loadNotes(notes) });

ready() jQuery函数接受一个函数。你正在做的是在读取那行代码时正确执行该函数。不是在文档实际加载时。

如果能为您解决问题，请告诉我。

Answer 3

为什么不把$.get放在文档准备好的内部？通过您显示的代码将其存储在变量中是没有意义的。（如果您想要实现的唯一目的是在加载文档后获取内容）

$( document ).ready(function() {

    $.get("../docs/notes.txt", function (data) {
        $("#note-app").val(data);
    });

));

或作为一种功能：

$( document ).ready(function() {

    function loadNotes() {
        $.get("../docs/notes.txt", function (data) {
            $("#note-app").val(data);
        });
   }

   loadNotes(); //Execute function now when DOM is loaded

));

值得一提的另一件事是

您的示例中的

var notes = "pie";不在文档准备范围内，因此无法在文档就绪时访问。

var notes = 'pie';
$( document ).ready(function() {
    alert(notes); //will alert undefined or similar
    var notes = 'die';
    alert(notes); //will alert die
}

如果你想要一个像这样的全局变量，你应该使用：window.notes =“pie”;

var window.notes = 'pie';
$( document ).ready(function() {
    alert(notes); //will alert pie
    var notes = 'die';
    alert(notes); //will alert die
}

使用文件中的内容加载textarea

3 个答案: