Question

我做了一个简单的JS，它从我的servlet中检索数据。我收到的数据是两个随机数。我想每3秒打印一次这个值。

<html>
<head>
<button onclick="getP()">Try it</button>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>

    var arr = new Array();
    var url = "http://10.10.1.19:8080/examples/MyHelloWorld";

    function getPos() {
        var jqxhr = $.getJSON(url+"?getpos&callback=?", 
            function(data) {
            //alert("success x " + data.x + ", y: " + data.y);
                arr[0] = data.x;
                arr[1] = data.y;
            })
            .success(function(data) { 
            //alert("second success x " + data.x + ", y: " + data.y); 
            })
            .error(function() { alert("error"); })
            .complete(function(data) {  });
    }           

    function onUpdate(){
        pos = getPos();
        document.write("On Update: success x: " + arr[0] + ", y: " + arr[1] + "<br>");
    }

    function getP(){
        setInterval("onUpdate()", 3000);
    }
</script>
</head>

一切都很好，但在开始时我没有收到这些值 - 这是输出：

On Update: success x: undefined, y: undefined
On Update: success x: undefined, y: undefined
On Update: success x: 84366016, y: 1675639473
On Update: success x: 87449458, y: 139664776
On Update: success x: 980514625, y: 902346893
On Update: success x: -1435971236, y: -156758443
On Update: success x: -2095036525, y: -973261813
On Update: success x: -1304285873, y: 1260988577
On Update: success x: -1056490280, y: 1080724495
On Update: success x: -51836505, y: -706315772
On Update: success x: -358732800, y: -1112197198
On Update: success x: -638049254, y: 565725784
On Update: success x: -550065549, y: -851319836
On Update: success x: -2091397055, y: -1486304337
On Update: success x: -394112078, y: 671840086
On Update: success x: -1462169807, y: -567576336
On Update: success x: 2138172836, y: 1437950295
On Update: success x: -517824901, y: 1736496095
On Update: success x: -1129327909, y: 2010537838
On Update: success x: 1331271573, y: 1572909584
On Update: success x: -316422252, y: -2019877720
On Update: success x: 532846139, y: -1840296395
On Update: success x: -355252412, y: -866851861
On Update: success x: -276365039, y: 616559691

依旧......

问题是 - 为什么前两行有“未定义”字样的值？在我在Chrome中的conosole中，我可以在两个第一个（和其余的）getJSON请求中观察到“200 OK”响应。也许我搞砸了一些价值观？请提前获取任何帮助。

Answer 1

这种情况正在发生，因为您正在处理异步代码。您的document.write行在Ajax请求完成之前正在执行。你的代码也有一些问题。 getPos()不会返回任何内容，那么为什么要将其返回分配给“pos”？将请求完成后必须执行的代码放入回调中。 mplungjan已经在他的回答中重写了你的代码。

Answer 2

这是因为ajax调用是异步的。你应该使用回调函数。

function getPos(onSuccess) {
    var jqxhr = $.getJSON(url+"?getpos&callback=?", 
        function(data) {
        //alert("success x " + data.x + ", y: " + data.y);
            arr[0] = data.x;
            arr[1] = data.y;
            onSuccess(data.x, data.y);
        })
        .success(function(data) { 
        //alert("second success x " + data.x + ", y: " + data.y); 
        })
        .error(function() { alert("error"); })
        .complete(function(data) {  });
}  

function onUpdate(){
    getPos(function(x, y) {
       document.write("On Update: success x: " + x + ", y: " + y + "<br>"); 
    )};
}

Answer 3

像

这样的东西

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>

    var arr = [];
    var url = "http://10.10.1.19:8080/examples/MyHelloWorld";

    function getPos() {
        var jqxhr = $.getJSON(url+"?getpos&callback=?", 
            function(data) {
            //alert("success x " + data.x + ", y: " + data.y);
                arr[0] = data.x;
                arr[1] = data.y;
                $("#output).append("On Update: success x: " + arr[0] + ", y: " + arr[1] + "<br>");

            })
            .error(function() { alert("error"); })
    }           
    function getP() {
      setInterval(getPos, 3000);  
    }


</script>
</head>
<body>
<button onclick="getP()">Try it</button>
<div id="output"></div>
</body>

带getJson的javascript setInterval

3 个答案: