JS変数をAJAXデータに渡すには？

Question

私は従業員の名前を持つ簡単なページを持っており、Jquery UI draggableを使用してドラッグすることができます。私はドラッグされた項目の "上"と "左"の位置を取得して、それをJS変数に入れます。

私はこれらの2つの変数を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({ 
    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 } 
    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に格納した値をkeyOnLeftKeyに代入しています。