0

我想用从 ajax 接收到的数据来改变 icon1 和 icon2 的位置。

“结果”是 div 元素。通过显示从 ajax 收到的消息，它可以正常工作，但我想知道为什么“icon1”和“icon2”没有移动。确实收到了消息，并且“结果”元素每 0.5 秒更改一次并向我显示结果。诡异的？！

我在 chrome 上尝试了以下代码，但它不起作用。我应该对我的代码做什么。我没有在其他浏览器上尝试过，如果chrome旁边的浏览器可以工作，请告诉我。谢谢你。

setInterval(function(){

    // post data
    $.ajax({
        type: "POST",
        url: "http://localhost:8080",
        data: {id:mId,color:mColor,x:mX,y:mY}
    }).done(function(msg){

        // result is div element
        result.text(JSON.stringify(msg) );          


    }).fail(function(jqXHR, textStatus) {
        result.text( "Request failed: " + textStatus );
    });

    var jObj = jQuery.parseJSON( result.text() );               

    // icon1 and icon2 is div element
    icon1.css({
        position:"absolute",top:(jObj[0].y),left:(jObj[0].x)
    }); 
    icon2.css({                         
        position:"absolute",top:(jObj[1].y),left:(jObj[1].x)
    });

}, 500);
4

2 回答 2

6

ajax 是异步的！！！您应该始终在 ajax 的成功函数中编写代码，以确保 ajax 已返回所需的值..试试这个

setInterval(function(){

// post data
$.ajax({
    type: "POST",
    url: "http://localhost:8080",
    data: {id:mId,color:mColor,x:mX,y:mY}
}).done(function(msg){

    // result is div element
    result.text(JSON.stringify(msg) );          
     var jObj = jQuery.parseJSON( result.text() );               

    // icon1 and icon2 is div element
    icon1.css({
       position:"absolute",top:(jObj[0].y),left:(jObj[0].x)
    }); 
    icon2.css({                         
        position:"absolute",top:(jObj[1].y),left:(jObj[1].x)
    });

}).fail(function(jqXHR, textStatus) {
    result.text( "Request failed: " + textStatus );
});

}, 500);

或者让它更干净一点......（并在回答后编辑）

setInterval(function(){

// post data
$.ajax({
    type: "POST",
    url: "http://localhost:8080",
    data: {id:mId,color:mColor,x:mX,y:mY}
}).done(function(msg){

    // result is div element
    result.text(JSON.stringify(msg) );          

    changeCss();

}).fail(function(jqXHR, textStatus) {
    result.text( "Request failed: " + textStatus );
    changeCss();
});

}, 500);

function changeCss(){
     var jObj = jQuery.parseJSON( result.text() );
     icon1.css({
       position:"absolute",top:(jObj[0].y+"px"),left:(jObj[0].x+"px")
    }); 
    icon2.css({                         
        position:"absolute",top:(jObj[1].y+"px"),left:(jObj[1].x+"px")
    });
}
于 2013-06-11T12:19:31.833 回答
0

谢谢@bipen 的解决方案。我已经尝试过你的代码，但它仍然不起作用。

在我使用您的代码并进行一些编辑之后，它就可以工作了。也许解决方案很菜鸟，但在我在 jObj 后面添加“px”后效果很好。

function changeCss(){
     var jObj = jQuery.parseJSON( result.text() );
     icon1.css({
       position:"absolute",top:(jObj[0].y+"px"),left:(jObj[0].x+"px")
    }); 
    icon2.css({                         
        position:"absolute",top:(jObj[1].y+"px"),left:(jObj[1].x+"px")
    });
}

无论如何，+1 确实解决了我 50% 的问题。

于 2013-06-11T12:37:39.630 回答