0

サーブレットからデータを取得する単純なJSを作成しました。私が受け取っているデータは2つの乱数です。この値を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

等々...

質問は-なぜ最初の2行に価値のある「未定義の」単語があるのですか？Chromeの私のコノソールでは、最初の2つ（および残りの）のgetJSONリクエストで「200OK」の応答を確認できます。多分私はいくつかの値を台無しにしましたか？助けが必要な場合は事前にThx。

4

3 に答える 3

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>"); 
    )};
}
于 2012-08-07T15:47:57.977 に答える
2

これは、非同期コードを処理しているために発生しています。document.write行は、Ajaxリクエストが完了する前に実行されています。コードにもいくつか問題があります。getPos()何も返さないのに、なぜその戻りを「pos」に割り当てるのですか？リクエストの完了後に実行する必要のあるコードをコールバックに入れます。mplungjanはすでに彼の答えであなたのコードを書き直しました。

于 2012-08-07T15:45:22.793 に答える
0

何かのようなもの

<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>
于 2012-08-07T15:48:37.140 に答える