使用jquery获取URL内容

Question

我正在使用jquery阅读本地文件的内容，并获得undefined。

我觉得问题与URL加载的同步有关。但我不知道如何修复此代码：

function url_content(url)
{
    var content;
    $.get(url,function( data ) {content=data});
    return content;
}


var content=url_content("local_templates/template1.html");
alert(content);

Answer 1

它因为javascript的异步性质。您必须等待数据返回才能使用它。你需要做这样的事情：

require

或只是

vm

如果你绝对必须保持同步，你可以这样做（不推荐）

vm

jQuery: Performing synchronous AJAX requests

Answer 2

异步与同步

“Ajax”中的“A”表示“异步”。这个词的基本含义很难为我理解，我知道它可能需要一些时间来熟悉，但它在现代Web开发和计算中是一个关键主题，因此值得花一点力气。

大多数情况下，您的代码以同步方式运行，因此您无需担心环境是否准备就绪。考虑到以下代码，很明显“v”已准备好在您需要时使用，您无需等待进行初始化。

var v = 1;     // no delay during initialization
var u = v + 1; // you can use "v" immediately

即使此时有延迟，同步处理也会在执行下一行之前等待指令完成。因此，您可以确定“v”将在您需要时准备就绪。现在，让我们看看如果我们引入异步任务，这段代码的行为。

function ajax (url) {
    // 1. go to url asynchronously
    // 2. bring back the value
    // 3. return the value
};
var v = ajax('mywebsite.com'); // undefined
var u = v + 1; // "v" is not ready -> NaN

任务编号的方式反映了你脑海中正在发生的事情，但它不正确，实际上3发生在2之前。粗略地说，ajax()不能足够快地获得值并在第一个任务之前返回完成，因此，该值不可用，程序失败。

更准确地说，只要调用ajax()，程序就会开始与远程计算机通话。这样的任务可以持续几秒钟，但程序知道它的异步性质，因此，它不会等待结果并立即跳转到下一行。

现在我认为你应该更好地了解正在发生的事情。重点是程序不一定在单个流程中执行，在 parallel 中可能会执行一些与其余任务分开执行的任务。如果您仍然感到困惑，请在进一步思考之前花些时间考虑一下： - ）

如何处理异步任务？

那么，如何避免在执行异步任务时崩溃程序？使用回调。回调是一个函数，它作为参数传递给另一个函数并在内部调用。让我们看看如何使用回调修复上一个代码块：

function ajax (url, callback) {
    // 1. go to url asynchronously
    // 2. bring the value
    // 3. when previous tasks done, do callback(value)
};
ajax('mywebsite.com', function (value) {
    var v = value;
    var u = v + 1;
});

要完全理解它是如何工作的，您需要知道有一个内部机制，它充当程序和远程计算机之间的中间人。只要远程计算机的响应可用，该机制就会调用回调函数。

嗯，我认为现在已经足够了，我不会打扰你了;-)有关详细信息，你应该浏览jQuery's docs on Ajax，它可以是一个好的起点。作为结论，这里是ajax()的可能实现（不是防弹）。享受。

function ajax (url, callback) {
    var req = new XMLHttpRequest();
    req.open('GET', url, true); // true = asynchronous
    req.onload = function () {
        var value = JSON.parse(this.responseText);
        callback(value);
    };
    req.send(null);
}

其他内容（点击放大）

同步：主流在远程查询期间暂停。

异步：主流在远程查询期间继续运行。

Answer 3

“。success”可能无法正常工作并导致错误，请尝试使用“ .then”：

  var url="local_templates/template1.html";
  $.get(url).then(function(data){ alert(data); });