Jquery 여러 독립적 인 Ajax 호출

Question

나는 여러 행의 데이터가있는 웹 사이트에 테이블을 가지고 있습니다. 각 데이터 행은 행 자체에서 편집 할 수 있으며 각 행의 끝에는 저장 버튼이 있습니다.

따라서 10 개의 행이 있으면 10 개의 저장 버튼이 있습니다.

각각의 저장 단추를 사용하여 각각의 행 데이터를 ajax 호출을 통해 데이터베이스에 저장하고 Ajax 호출이 완료된 후 단추 텍스트가 "저장 됨"으로 변경됩니다. 즉, 사용자는 이전 저장이 완료 될 때까지 기다리지 않고 순차적으로 여러 저장 버튼을 클릭 할 수 있습니다.

따라서 각 단추마다 고유 한 아약스 호출이 필요하지만 쉽게 할 수있는 방법을 찾는 데 어려움이 있습니다. 누군가 아약스 해골 코드를 도울 수 있습니까? 버튼 ID를 포함하는 아약스 호출을 제출하고 리턴 아약스 메시지의 버튼 ID에 대해 아약스 전체 함수를 제출합니까?

건배 케빈

Answer 1

당신이 클릭 된 버튼의 신원을 알고있는 변수가 상상해보십시오. 전화 번호는 button입니다. success 콜백 자바 스크립트 클로저를 통해 발생했을 때

var button = // some button; 

당신은 다음과 같은 논리를 사용하여 Ajax 호출을 호출

...

$.ajax({ 
    // Other parameters 
    success: function(data) { 
     $(button).text("saved"); 
    } 
}); 

button 변수의 인스턴스는 범위에있을 것입니다. 따라서 콜백 컨텍스트는 해당 콜백의 인스턴스에 의해 여전히 알려져 있습니다.

다음은 테이블과 버튼을 사용하여 솔루션을 보여주는 특정 jsFiddle입니다. Ajax 서비스를 호출하는 대신,함수를 사용하여 몇 초 동안 지연 시키지만 원칙은 동일합니다.