JS 변수를 AJAX 데이터로 전달하는 방법은 무엇입니까?

Question

직원 이름이있는 간단한 페이지가 있고 Jquery UI draggable을 사용하여 드래그 할 수 있습니다. 드래그 된 항목의 "위쪽"및 "왼쪽"위치를 가져 와서 JS 변수에 넣습니다.

그런 다음이 두 변수를 AJAX 데이터에 전달하여 (update-db.php에서 해당 정보를 사용할 수 있도록) 어떻게해야하는지 잘 모르겠습니다.

아무도 도와 줄 수 있습니까? 저는 AJAX를 처음 접했고 "데이터"부분에 어려움을 겪었습니다.

Answer 1

당신은이 같은 전화 아약스 변경해야합니다 :

$.ajax({ 
    url: 'update-db.php', 
    type: 'POST', 
    data: {leftPosition: left, topPosition: top } 
}); 

이 서버에 변수를 사용하여 객체를 보낼 것입니다. 그러나 그것은 충분하지 않습니다. 아약스 요청의 성공과 실패를 다루는 것도 흥미 롭습니다. 이 같은 것을 할 수있는 :

당신은이 같은 전화 아약스 변경해야합니다 :

$.ajax({ 
    url: 'update-db.php', 
    type: 'POST', 
    data: {leftPosition: left, topPosition: top } 
}); 

이 서버에 변수를 사용하여 객체를 보낼 것입니다. 그러나 그것은 충분하지 않습니다. 아약스 요청의 성공과 실패를 다루는 것도 흥미 롭습니다. 이 같은 것을 할 수있는 :

$.ajax({ 
    url: 'update-db.php', 
    type: 'POST', 
    data: {leftPosition: left, topPosition: top } 
    success: function() { console.log('OK'); }, 
    error: function() { console.log('Fail!'); }) 
}); 

또는 더 나은 :

$.ajax({ 
    url: 'update-db.php', 
    type: 'POST', 
    data: {leftPosition: left, topPosition: top } 
}).done(function() { 
    console.log('OK'); 
}).fail(function() { 
    console.log('Fail!'); 
}); 

분명히 당신은 일에 더 흥미있는 일을 할과 기능이 외에 이벤트가 콘솔에 로그인 실패한다.

Answer 2

$.ajax({ 
        url: 'update-db.php', 
        type: 'POST', 
        data: {nameOfLeftKey: left, nameOfToptKey: top } 
      }); 
     } 

데이터 필드는 자바 스크립트 개체 (키 값 쌍)를 사용합니다. 여기이 코드는 var 왼쪽에 저장 한 값을 키 nameOfLeftKey에 할당합니다.