您好我有一个jquery脚本来加载svg地图上的状态。
地图使用此var来获得结果
var mystates = ["NY","NJ"];
如果我把状态手动工作正常,但我试图加载这个dinamically
我试过这个
var url = "/php/actions.php";
$.get(url,{
Action: "107"
},function(data){
var mystates = data;
//alert(mystates);
});
警报正确返回值但是我无法传递结果。
我试过这样的事情
var url = "/php/actions.php";
$.get(url,{
Action: "107"
},function(data){
var mystates = data;
//alert(mystates);
});
var getstates = mystates;
无效
问题是在获得tre结果后我需要在最后IF上传递
xhr.onreadystatechange = function(){
if ( xhr.readyState === 4 ){
var data = JSON.parse(xhr.responseText);
$.each(Object.keys(data), function(key, i) {
var estado = r.path(data[i].coordMap).attr(attr).data("capital", data[i].capital).data("nome", data[i].nome).data("sigla", data[i].sigla);
if (contains(mystates, estado.data("sigla"))){
感谢您的帮助。
/ * COMPLETE JQUERY * /
function contains(a, obj) {
var i = a.length;
while (i--) {
if (a[i] === obj) {
return true;
}
}
return false;
}
;(function($, w, d, u){
function getMyData(callback) {
var url = "/php/acoes.php";
$.get(url,{
Acao: "107"
}, callback );
}
getMyData(function(data) {
var resultado = data; //array ok! returns ["NY","NJ"]
//alert(resultado);
});
var estadosAtivos = ["NY","NJ"]; // array manually i m try to load the array here
/*var r = Raphael('maps', 550, 550),*/
var r = new ScaleRaphael('maps', 550, 550),
attr = {
cursor: 'pointer',
fill : '#0077b0',
stroke: '#fff',
'stroke-width': 2,
'stroke-linejoin':'round'
},
xhr = new XMLHttpRequest();
var estadoAtual;
var anterior;
xhr.onreadystatechange = function(){
if ( xhr.readyState === 4 ){
var data = JSON.parse(xhr.responseText);
$.each(Object.keys(data), function(key, i) {
var estado = r.path(data[i].coordMap).attr(attr).data("capital", data[i].capital).data("nome", data[i].nome).data("sigla", data[i].sigla);
if (contains(estadosAtivos, estado.data("sigla"))){
estado.animate({
fill: '#ffda1f'
}, 150);
estado.click(function(){
this.animate({
fill: '#333'
}, 150);
if (anterior != null) {
anterior.animate({
fill : '#ffda1f',
stroke: '#fff',
'stroke-width': 2,
'stroke-linejoin':'round'
}, 150);
}
anterior = this;
if (document.getElementById(estadoAtual) != null)
document.getElementById(estadoAtual).style.display = 'none';
estadoAtual = this.data("sigla");
if (document.getElementById(estadoAtual) != null)
document.getElementById(estadoAtual).style.display = 'block';
}).mouseover(function(evt) {
var x = evt.pageX;
var y = evt.pageY;
$('#regiaoLegenda').html(this.data("nome")).css({
top: y,
left: x+20,
position: 'absolute',
display: 'block'
});
this.animate({
fill: '#333'
}, 150);
}).mouseout(function() {
$('#regiaoLegenda').css({
display: 'none'
});
if (estadoAtual != this.data("sigla")) {
this.animate({
fill: '#ffda1f'
}, 150);
}
});
}
});
}
};
xhr.open("get", "/js/mapa/estados.json", false);
xhr.send(null);
/* resize do mapa */
r.changeSize(325, 327, true, false);
}(jQuery, this, this.document));
答案 0 :(得分:1)
您在AJAX的回调中声明了变量mystates
,这意味着变量范围仅限于该函数。
AJAX也是异步的,所以简单地在调用后立即分配变量就像你正在尝试的那样无法正常工作,那个调用仍然在进行中。使用回调函数!
function getMyData(callback) {
$.get(url,{
Action: "107"
}, callback );
}
并使用它:
getMyData(function(data) {
console.log(data); //theres your array!
});
答案 1 :(得分:0)
问题是你有一个本地范围的变量mystates。你需要这样做。
var url = "/php/actions.php";
var mystates;
$.get(url,{
Action: "107"
},function(data){
mystates = data;
});
这样变量mystates就在你需要的范围内。
<强>更新强>
好的,看到代码之后,你只需要串联两个电话。
var mystates;
function doXHRRequest()
{
//xhr declaration and processing goes here
}
var url = "/php/actions.php";
$.get(url,{Action: "107"},
function(data){
mystates = data;
doXHRRequest();
});
这样做将需要在处理XHR请求之前完成get。希望这可以帮助。您应该能够以$ .get(url,function(){})基于jQuery的调用来执行xhr请求,而不是按照您的方式执行,但您可能需要按照编码的方式执行此操作