Question

我有一个带有员工姓名的简单页面，您可以使用Jquery UI draggable拖动它们。我得到了＃34; top＆＃34;和＆＃34;左＆＃34;拖动项的位置并将其放入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很陌生，并且正在努力应对数据＆＃34;部分内容。

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 left中的值赋给键nameOfLeftKey。

如何将JS变量传递给AJAX数据？

2 个答案: