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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5059302/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 18:28:26  来源:igfitidea点击:

Cannot load an external page with jQuery.load into a div in my page

jqueryloadexternal

提问by Amal Kumar S

I am not able to load an external html page into a div in my page.

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

My Jquery Code is:

我的 Jquery 代码是:

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

My HTML page is

我的 HTML 页面是

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

I also tried using another JQuery code

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

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

Could anyone please help me.

任何人都可以帮助我。

Thanks Amal

谢谢阿迈勒

采纳答案by David Hellsing

Due to browser restrictions, most Ajax requests are subject to the "same origin policy". That means that in most cases, you can't use jQuerys ajax methods to fetch data from external domains without using a Proxy, YQL, JSONP or equivalent technique to get around this.

由于浏览器的限制,大多数 Ajax 请求都遵循“同源策略”。这意味着在大多数情况下,如果不使用代理、YQL、JSONP 或等效技术来解决这个问题,就不能使用 jQuery ajax 方法从外部域获取数据。

A pure javascript option is Yahoo's YQL service. There is a plugin that extends jQuery.ajaxto allow external domains: https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js

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

Using this plugin should allow the ajax example in your question.

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

Another option is to use a server-side proxy and then request that page using ajax. If your server can run PHP, try googling for something like "php ajax proxy" and you'll get plenty results.

另一种选择是使用服务器端代理,然后使用 ajax 请求该页面。如果您的服务器可以运行 PHP,请尝试在 Google 上搜索诸如“php ajax 代理”之类的内容,您会得到很多结果。

回答by Amal Kumar S

First download the JS file https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.jsand include the js file in your page. Below is the function that I used to load the external page.

首先下载 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);
           }
         });
       }

This worked for me getting content from external site.

这对我从外部站点获取内容很有用。

回答by Lightness Races in Orbit

$('div#external').html();sets the HTML inside your divobject to the empty string.

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

As responseis the returned HTML, you probably meant:

由于response是返回的HTML,你可能是指:

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

The jQuery documentation on $.getprovides an example like this.

jQuery文档$.get提供了一个这样的例子。

Your next problem will be that you are attempting to make a cross-domain request. See this sitefor more information on how to get around Javascript's security restrictions in this area.

您的下一个问题将是您正在尝试进行跨域请求。有关如何绕过 Javascript 在这方面的安全限制的更多信息,请参阅此站点

回答by Rafay

Due to same origin policyyou are pretty limited to sending requests outside your domain. JSONPis a work around, may be it'll help.

由于同源策略,您只能向域外发送请求。JSONP是一种解决方法,可能会有所帮助。

回答by DrStrangeLove

in order to bypass cross -domain restriction, try jQuery.getJSON instead (using JSONP).

为了绕过跨域限制,请尝试使用 jQuery.getJSON(使用 JSONP)。

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

P.S.: but your url variable should include callback function like this: "http://www.example.com/?t="+v+"&callback=?"

PS:但是你的 url 变量应该包括这样的回调函数:“http://www.example.com/?t="+v +"& callback=?