Question

我需要从外部网站加载一些特定信息，并将其显示在我自己的html页面上。最好的方法是什么？

我试着这样做：

function displayData(){
    $.get("http://www.website.com", function(response) { 
        var info = $(data).find(".specific-class").text();
        console.log(info);
    });
}

$(document).ready(function(){
    $('.btn').on('click', function(){
       displayData();
    });

});

此get请求返回整个html。我只需要显示特定的文字/信息 - <div class="specific-class"> text </div>

但这种方式不起作用。或者我应该解析整个HTML并找到所需的部分？请指教，如何解决这个问题？

Answer 1

所以......与其他人一致。确保您没有跨站点来源问题。如果您有跨站点原始请求问题，您将能够在控制台中看到它。它看起来像：

XMLHttpRequest无法加载https://google.com/。没有请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许来源“https://fiddle.jshell.net” 访问。

如果情况并非如此，我发现另一个可能导致问题的奇怪问题;并绕过它。

似乎从另一个页面加载html有一个奇怪的问题，就是无法搜索根级别的项目。（IE如果它是body标签的直接子项。）我目前不知道为什么会这样，但它似乎将body标签的所有子项视为字符串。我使用jquery.each进行了此操作，如下例所示。有人可能会更好地解释为什么会发生这种情况或更好的解决方法。

$(document).ready(function() {
    $("#go").on("click", function() {
        $.get("http://localhost:8080/sa_support/index.html?v=4", function(data) {
            var input = $(data);
            var found = input.find(".cake");
            console.log(found.length);
            input.each(function() {
                if ($(this).hasClass("cake")) {
                    console.log("Found it in the top level.");
                    found = found.add($(this));
                }
            });

            console.log(found.length);
        });
    });
});

如果加载的HTML如下所示，它将使用普通的jQuery方法找到它。

<html>
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link href="dist/build.css" rel="stylesheet" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="dist/build.js"></script>
  </head>
  <body>
        <div>
            <input type="text" id="custom" class="cake" value="aaa"/>
        </div>
  </body>
</html>

但是，如果内容与此类似，则无法使用常规方法找到标记。每个循环分别选择它。

<html>
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link href="dist/build.css" rel="stylesheet" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="dist/build.js"></script>
  </head>
  <body>
        <input type="text" id="custom" class="cake" value="aaa"/>
  </body>
</html>

这对我来说似乎是jQuery中的一个错误，但也许不是吗？我真的不知道这个。

HTML无效？

如果这仍然不是您的问题，则您加载的网站可能无法输出有效的HTML。如果是这种情况，我不知道jQuery可以为你修复它。

从外部网站加载数据

1 个答案: