Question

我无法将外部html页面加载到页面中的div中。

我的Jquery代码是：

$(document).ready(function(){
     var url = 'http://www.google.com';
     $.get(url, function(response) {
          $('div#external').html(response);
     });
 });

我的HTML页面是

<html><body><div id="external"></div></body></html>

我也尝试过使用另一个JQuery代码

$(document).ready(function() {
    $('#external').load('http://google.com');
});

有谁可以帮助我。

由于阿迈勒

Answer 1

由于浏览器的限制，大多数Ajax请求都受“同源策略”的约束。这意味着在大多数情况下，您无法使用jQuerys ajax方法从外部域获取数据，而无需使用Proxy，YQL，JSONP或等效技术来解决此问题。

纯javascript选项是Yahoo的YQL服务。有一个扩展jQuery.ajax以允许外部域名的插件：https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js

使用此插件应该允许你的问题中的ajax示例。

另一种选择是使用服务器端代理，然后使用ajax请求该页面。如果您的服务器可以运行PHP，请尝试使用Google搜索“php ajax proxy”等内容，您将获得大量结果。

Answer 2

首先下载JS文件https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js并在页面中包含js文件。下面是我用来加载外部页面的功能。

       function test () {
         $.ajax({
           url: 'http://external_site.com',
           type: 'GET',
           success: function(res) {
             var content = $(res.responseText).text();
             alert(content);
           }
         });
       }

这对我来说是从外部网站获取内容的。

Answer 3

$('div#external').html();将div对象中的HTML设置为空字符串。

由于response是返回的HTML，您可能意味着：

$(document).ready(function(){
     var url = 'http://www.google.com';
     $.get(url, function(response) {
          $('div#external').html(response);
     });
});

jQuery documentation on $.get提供了这样的示例。

您的下一个问题是您正在尝试发出跨域请求。有关如何在此区域内解决Javascript安全限制的详细信息，请参阅this site。

Answer 4

由于same origin policy，您只能在域外发送请求。 JSONP是一种解决方法，可能会有所帮助。

Answer 5

为了绕过跨域限制，尝试使用jQuery.getJSON（使用JSONP）。

jQuery.getJSON(url, function(data){
     // your code here
         $('div#external').html(data);      
     });

P.S。：但你的url变量应该包含这样的回调函数： “http://www.example.com/?t=” + V + “＆安培;？的回调= ”

无法将带有jQuery.load的外部页面加载到我的页面中的div中

5 个答案: