Question

我正在尝试将JSON数组中的网站逐个加载到div。（一旦加载完成，然后加载下一个），但我不知道如何自己设置它？抱歉jsfiddle.net Access-Control-Allow-Origin不允许。

$(document).ready(function() {
//var mark = false;
//if(mark==false){
    //var json = {"set":"[{'web':'google','site':'http://www.google.com'},{'web':'bing','site':'http://www.bing.com'},{'web':'yahoo','site':'http://www.yahoo.com'}]"} 
    var json = {"set":"[{'web':'google','site':'1.html'},{'web':'bing','site':'2.html'},{'web':'yahoo','site':'3.html'}]"} 

    json = eval(json.set);
    for(var i=0; i<json.length; i++){
        var divid = json[i].web;
        var url = json[i].site;
        $('#'+divid+'').load(''+url+'',function(){
            //mark = false;
        });
    }
//}
});



<div id="google"></div>

<div id="bing"></div>

<div id="yahoo"></div>

Answer 1

<击>

很抱歉，Access-Control-Allow-Origin不允许使用jsfiddle.net。

您的问题与jsfiddle无关。由于浏览器内置的same origin policy限制，您无法跨域发送AJAX请求。你可以忘记做：

$('#google').load('http://www.google.com');

除非包含此脚本的页面位于http://www.google.com上。

在您的情况下，您可以在您的域上构建服务器端脚本（使用某些服务器端语言，如PHP，Java Servlets，ASP.NET，...），它们将充当您的域和远程域之间的桥梁你想要获取。然后，您将把AJAX请求发送到服务器端脚本。

~~您还可以查看following article，它解释了一些跨域AJAX技术。~~

更新：

假设您希望以这样的方式对AJAX请求进行排队，即只有在第一个请求成功后才会触发第二个请求，依此类推，您可以编写一个递归方法：

$(function() { // TODO: it's pretty trivial to build this list array given your initial // json object, so I am not including it here var list = [ { url: '/url1/', target: '#google' }, { url: '/url2/', target: '#bing' }, { url: '/url3/', target: '#yahoo' }, ]; (function(list) { var element = list.shift(); if (element) { var caller = arguments.callee.caller; $(element.target).load(element.url, function() { caller(list); }); } })(list); });

jquery从json数组逐个加载站点

1 个答案: