each() 루프 내의 jQuery AJAX 솔루션

Question

.each() 루프에서 jQuery에서 AJAX를 사용할 때 문제가 있음을 발견했습니다. 스크립트가 실행될 때 데이터베이스의 첫 번째 레코드 만 업데이트됩니다.

<?php 
include_once "globals.php"; 

dbConnect(); 

$isExisting = mysql_query("SELECT COUNT(userTypeId) AS userCount FROM userType WHERE userTypeId='".$_POST['userTypeId']."';"); 

$result = mysql_fetch_array($isExisting); 

//original: if(!$result['userCount'] = 0) <-- This was a logical error 
if($result['userCount'] != 0) 
    mysql_query("UPDATE userType SET userTypeName='".$_POST['userTypeName']."', isDeleted='".$_POST['isDeleted']."' WHERE userTypeId='".$_POST['userTypeId']."';"); 
else 
    mysql_query("INSERT INTO userType VALUES('', '".$_POST['userTypeName']."', '".$_POST['isDeleted']."');"); 

echo mysql_error(); 

dbClose(); 
?> 

내가 대신 비동기의 동시 사용할 수있는 옵션을 가지고 읽었습니다,하지만 난 또한 읽고 :

function save(){ 
      var _userTypeId; 
      var _userTypeName; 
      var _isDeleted; 
      var request; 

      $("tr.recUserType").each(function(){ 
       $this = $(this); 
       _userTypeId = $this.find("#userTypeId").html(); 
       _userTypeName = $this.find("#userTypeName").val(); 
       _isDeleted = $this.find("#isDeleted").val(); 

       request = $.ajax({ 
        url: "save.php", 
        type: "POST", 
        data: {userTypeId: _userTypeId, userTypeName: _userTypeName, isDeleted: _isDeleted} 
       }); 
      }); 

      request.done(function(){ 
       document.location.reload(); 
      }); 

      request.fail(function(){ 
       alert("Request Failed!"); 
      }); 
     } 

그리고 save.php의 내용 : 여기

내 스크립트입니다 그것은 좋은 습관이 아닙니다.

어떻게하면 실제로 비동기 적으로 완료되고 문제를 해결할 수 있습니까?

Answer 1

jQuery의 $ .ajax()는 jQuery XMLHttpRequest 객체 ("jqXHR")를 반환합니다. 이 객체를 "응답"변수에 저장하고 있습니다.

귀하의 문제는 범위입니다. jqXHR의 N을 모두 동일한 "요청"변수에 저장하고 있습니다. 루프가 끝날 때까지 "요청"은 마지막 jqXHR을 가리키고 있으므로 .done()은 마지막 요청이 완료 될 때만 호출됩니다.

Karl Anderson은 Karl Anderson이 지적했듯이 모든 jqXHR을 배열에 저장 한 다음 모든 호출이 [비동기 적으로] 완료되면 단일 콜백을 실행해야합니다.

또한 $ .ajax()의 "async : false"를 사용하려는 유혹을 피하십시오. 요청이 완료 될 때까지 브라우저가 강제로 중지되며 이는 나쁘다. 거의 항상 $를 성취 할 수 있습니다.ajax() 비동기 호출; 그것은 약간의 교활함을 필요로 할지도 모르지만 확실히 더 나은 것을 위해있을 것입니다.

Answer 2

문제가 코드 블록에 있습니다, 작업이 비동기이기 때문에,이 라인은 저장하기 전에 실행중인

이

request.done(function(){ 
    document.location.reload(); 
}); 

완료되어 완료되지 저장하여 후에 첫째, done 로직을 실행 .

jQuery .when()/.then() 함수를 사용하여 로직을 진행하기 전에 모두 실행될 때까지 기다릴 수있는 지연된 오브젝트의 배열을 작성해야합니다.

다음은이 상황을 설정하는 방법을 자세히 설명하는 이전 StackOverflow 질문입니다. 허용되는 답변 jQuery when each is completede trigger function을 읽으십시오.

Answer 3

여기 몇 가지 일이 있습니다.

(루프 밖에서 범위) 루프에서 request 변수를 다시 사용하여

1. 는 루프의 매 반복이 무엇 겹쳐 요청에 새로운 객체를 할당한다. 이는 마지막 반복에 대한 응답 핸들러 만 설정한다는 것을 의미합니다.

2. 당신의 request.done 방법 당신은 루프의 각 반복에 대해 동일한 userTypeId을 찾고 @Sean

에서 언급 한 바와 같이 실제로 ...

3. 를 다른 요청을 중단하고 할 페이지를 다시로드