如何將JS變量傳遞給AJAX數據？

Question

我有一個帶有員工姓名的簡單頁面，你可以使用Jquery UI拖動它們拖動它們。我得到拖動項目的「頂部」和「左側」位置並將其放入JS變量中。

然後，我想將這兩個變量傳遞到AJAX數據（以便update-db.php可以使用該信息），但不知道如何做到這一點。

$(function() { 

    $('.employee').draggable({ 
     stop: function(event, ui) { 
      var left = $(this).position().left; 
      var top = $(this).position().top; 


      //Make ajax call here: 
      $.ajax({ 
        url: 'update-db.php', 
        type: 'POST', 
        data: ??????, 
      }); 
     } 
    }).resizable({ 
     stop:function(event,ui){} 
    }) 
    }); 

任何人都可以幫忙嗎？我對AJAX非常陌生，並且正在努力處理它的「數據」部分。

Answer 1

你應該改變你的AJAX調用是這樣的：

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

這將發送對象與變量到服務器。但這還不夠。你對待ajax請求的成功和失敗也很有趣。你可以是這樣做的：

你應該改變你的AJAX調用是這樣的：

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

這將發送對象與變量到服務器。但這還不夠。你對待ajax請求的成功和失敗也很有趣。你可以是這樣做的：

$.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 } 
      }); 
     } 

數據字段接受一個JavaScript對象（鍵值對）。這裏這段​​代碼將你存儲在var中的值賦給nameOfLeftKey。