使用 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 的异步特性。您必须等待数据返回才能使用它。你需要做这样的事情：

function url_content(url){
    return $.get(url);
}


url_content("local_templates/template1.html").success(function(data){ 
  alert(data);
});

要不就

$.get("local_templates/template1.html").success(function(data){ 
  alert(data);
  doSomeStuffWithTheResult(data);
});


function doSomeStuffWithTheResult(content) {
  // code that depends on content goes here...
}

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

function getRemote(remote_url) {
    return $.ajax({
        type: "GET",
        url: remote_url,
        async: false
    }).responseText;
}

jQuery：执行同步 AJAX 请求

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()被调用就开始与远程计算机对话。这样的任务可以持续几秒钟，但程序知道它的异步性质，因此，它不会等待结果并立即跳转到下一行。

现在我认为你应该更好地了解发生了什么。重点是程序不一定在单个流程中执行，可能有一些任务与其他任务分开执行，并行执行。如果您仍然感到困惑，请在继续之前花一些时间考虑一下:-)

如何处理异步任务？

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

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 的 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);
}

其他内容（点击放大）

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

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