Jquery로 배열에 아약스 응답 저장하기

Question

PHP 파일에서 json 응답을 얻는 Jquery ajax 호출이 있는데, json 응답은 훌륭하고 정확하게 응답 로그를 콘솔에 넣을 수 있습니다. 아약스 결과를 벗어난 정보를 저장할 수 있다면 배열을 업데이트 할 수 없습니다. 코드는 다음과 같습니다. 아래에 결과를 게시했습니다.

window.array={name: 'john',color:'red'};  

console.log(array['name']); 
console.log(array['color']); 

$.ajax({ 
    url : 'getJsons.php', 
    type : 'POST', 
    data : data, 
    dataType : 'json', 
    success : function (data) { 

     array['name'] = data['name']; 
     array['color'] = data['color']; 
     console.log(array['name']); 
     console.log(array['color']); 
    }   
}); 

console.log(array['name']); 
console.log(array['color']); 

이 다음과 같은 콘솔가 발생합니다 : 그래서

john 
red 

john 
red 

marry 
blue 

내가 바로 처음 콘솔을 얻을 수 있지만 아약스 호출하기 전에 아약스 호출 후 스크립트를로드하는 것, 이유가 있다는 것입니다 ? 왜냐하면 스크립트가 이미로드 된 후에 가져 오기 때문에 나머지 코드에서 아약스 결과를 사용할 수 없기 때문입니다. 아약스가 나머지 전에 실행되도록하는 방법이 있습니까?

Answer 1

서버로부터의 ajax 응답이 언제 도착하는지 알 수 없기 때문에 AJAX는 기본적으로 비동기입니다. 즉, $.ajax이 실행되고 자바 스크립트 엔진이 나머지 코드를 계속 실행한다는 것을 의미합니다 (예를 들어 두 개의 console.log이 ajax 호출 외부에 있음). 앞으로는 Ajax 호출이 서버에서 응답을받을 수도 있고하지 않을 수도 있습니다 (그리고 상태를 변경하여이를 알립니다). 이 시점에서 자바 스크립트 엔진은 소위 "콜백"함수를 처리합니다.이 코드는 ajax 호출이 끝날 때 실행됩니다. 콜백 함수는 ajax 메서드의 success 매개 변수로 정의합니다.

그래서 코드를 실행하는 올바른 방법은 콜백 함수의 결과에 의존하는 모든 것을 실행하는 것입니다.거기에 직접 모든 것을 넣어, 또는 다음 성공 함수에서 호출 할 수있는 별도의 함수 선언에 앞서

$.ajax({ 
    /*...*/, 
    success : function (data) { 

     array['name'] = data['name']; 
     array['color'] = data['color']; 

     /* either put all your dependent code here */ 

     /* or just call a callback function: */ 
     callback(data); 

    }   
}); 

/* code to be executed after the ajax call */ 
function callback(data){ 

    // work with the response here 
    console.log(data); 

} 

나쁜 아이디어 :

은 또한 당신이 동기로 전화를 말할 수있는 (나쁜, 왜냐하면 서버에서 응답을 기다리는 동안 기본적으로 브라우저가 고정되어 있으므로 코드를 그대로 유지해야하기 때문입니다.

$.ajax({ 
     /*...*/, 
     async : false,  
}); 
// risk some waiting time (possibly the full duration of a timeout!!) 
// the browser is locked during this time 

// continue normally 
console.log(array['name']); 
console.log(array['color']); 

Answer 2

ajax 호출이 완료되기 전에 쿼리가 실행 된 후 코드가 발생합니다. 배열이 채워 졌으므로 걱정하지 마십시오. AJAX가 비동기 적으로 실행되기 때문에 AJAX 호출 후에 만 ​​값이 할당됩니다.

예를 들어 AJAX 호출 이후에 10 초의 시간 초과를 설정 한 다음 (AJAX 호출이 소요 된 시간에 따라 다름) 배열 값을 호출하면 AJAX가 실행되고 통과했다면 콜백 함수는 적절하게).

코드에서 단계별 설명은 다음과 같습니다.

You display the values from the array which shows john red

You make the AJAX call, when this call has completed it will perform your success: function

The ajax call takes (lets say) 1 second to complete

Whilst your page is waiting for the call to complete and update the values it moves onto the next bit of code which displays the array, as the array hasn't been updated yet as success hasn't been called it still displays john red

1 seconds later the success function is called, assigns the new names to the array and prints them out.

Answer 3

AJAX 호출 코드의 나머지는 AJAX 인 경우에 관계없이 실행되는 것을 의미하는 비동기 실행하고 다시 돌린. 코드가 결과에 따라 다르면 함수에 넣고 Ajax (success 함수)의 콜백에서 호출합니다.

Answer 4

이 재료는 표준 재료 인 경우 나도 몰라,하지만 작업입니다 :

var xmlURL = "Data/XML/"+GetURLParameter("xml"); 
var xmlInto = {}; 

$.get(xmlURL, function(xml) { 
    $(xml).find("line").each(function(){ 
     xmlInto[line_number] = line_info; 
    });    
}, 'xml'); 

console.log(xmlInto);