javascript - 找不到使用 javascript + jquery 从 URL 解析并将其显示在屏幕上的方法

Question

我是编码的初学者，我从 Codecademy.com 学到了我对 Jquery 和 Javascript 的大部分了解


我想做什么(之前有一点背景):

1. 将鼠标悬停在特定链接(部分 url)上
2. 获取完整链接内容(for full url)
3. 解析链接的HTML内容
4. 将解析后的数据呈现为“div”以显示带有数据的“弹出窗口”

所以我使用Jquery 将鼠标悬停在特定链接上，这样第1 步就完成了。 我卡在了第 2 步。

这是我的代码:

$(document).ready(function () {
    var link_account = $("a[href^='http://www.example.com/info.php?ID=']");
    link_account.mouseenter(function () {
        var data2 = $(this).get({dataType: "html"});
        $(this).after(data2);
    });
});

我在代码中尝试做的事情:

1. 等待文档加载(成功)
2. 找到我要使用的部分链接(成功)
3. 当我的鼠标悬停在它上面时启动一个事件(成功)
4. 从链接中提取 HTML(失败)

   重要提示:我想在从链接访问 URL 后提取 HTML 页面的 HTML 内容。 (很抱歉，如果不清楚)

5. 将 HTML 代码作为字符串添加到应该有效的链接之后 - 已通过其他测试 实例(成功)

如您所见，我尝试使用 $.get 函数来接收所有 HTML 内容。但我想我不太正确地理解这个概念。在我试图从其他地方拉出它之前，我什至试图传递 URL 来测试它，但它没有帮助。我在这里不知所措。

**请注意，当我尝试将此 $(this).after(data2); 切换为:

$(this).after("<p>" + $(this).get() + "</p>");

我可以看到链接的完整 URL，而不是 HTML 内容。

我看到还有 $.ajax，但我不确定在这种情况下应该使用哪个。

一些指导将不胜感激!

Answer 1

您没有使用 AJAX $.get() , 而不是 this .get()这是完全不同的。这就是您没有从这些链接中获取 HTML 的原因。

//step 1: Run on DOM ready
$(function() {

  //step 2 & 3: Get all links you want and add event handler
  $("a[href^='http://www.example.com/info.php?ID=']").on('mouseover',function(){

    //let's reference this link since the context will change in the get callback
    var link = this;

    //step 4: Use the href and get the HTML of that link
    $.get($(this).attr('href'),function(html){

      //step 5: Put the returned html after your link
      $(link).after(html);
    });
  });
});

当然，Same-Origin规则适用于 AJAX。有很多方法可以绕过它，只需使用搜索即可。这里有很多关于它的问题。并且不要忘记使用浏览器的控制台。它告诉您很多有关发生的错误的信息。