Question

我想在我想要提供所有元素属性的地方做一个ajax请求。例如，我选择所有元素：

var elements = $('.droppable')

然后我做了我的ajax：

 $.ajax({
     url: "test.html",
     data: {myelements : elements},
      success: function(){

      }
  });

如何将我的所有元素属性作为高度，宽度，位置，顶部，左侧 ...提供给我的ajax请求。我必须自己制作一个阵列，还是有其他方法？

我想这样做因为我想在数据库中保存我元素的所有绝对位置。

感谢您的帮助。

Answer 1

你必须自己做，做一个你想要的属性列表。因此，您不必执行{ width : "width", height : "height" }等。使用以下方法，您可以将具有css元素和attr元素的数组放入将用作循环的数组中。

您甚至可能希望将attr和css数组分开，因为当您从服务器获取它时，您可以遍历每个元素属性和css对象。

像：

var attr = ["name", "id"];
var css = ["position", "left", "top"];
var elementsData = [];

$('.droppable').each(function(){
    var data = {};
    for(var i in attr)
    {
        data[ attr[i] ] = $(this).attr( attr[i] );
    }
    for(var i in css)
    {
        data[ css[i] ] = $(this).css( css[i] );
    }

    elementsData.push(data);
});


$.ajax({
     url: "test.html",
     data: {myelements : elementsData},
      success: function(){
          $('.droppable').addClass("done");
      }
  });

Answer 2

你不能在ajax的成功中使用$（this），在这种情况下使用elements.addClass（'done'）;

也是唯一能够为多个元素赋予不同高度/宽度/ pos的方法，你必须将每个元素的唯一id发布到ajax表单，然后响应必须是包含该元素的唯一id，height，width，pos（最可能是json），因此您可以通过它的唯一ID选择每个元素，然后根据返回的对象更改值

Answer 3

我认为您想循环遍历这些元素并将每个元素分别发布到数据库中。让您的服务器方法返回一个json对象，您可以使用该对象在页面上查找elment以更新类

$(".droppable").each(function(index, item){
  var id = $(item).attr("id"); //server will pass this back so you can select it later
  var height = $(item).css("height");
  var width = $(item).css("width");
   // etc.
  $.ajax({
     url: "test.html",
     data: {id: height: height, width: width}, //add each property
      success: function(data){ //data is returned by your server method
          $(data.elementId).addClass("done"); //you passed elementId to the server as 'id'
      }
  });
});

如果你想在一个请求中执行它，你可以设置一个关联数组并传递它。现在已经很晚了，这是我的头脑。这可能不是确切的语法，但希望它会指出你正确的方向

var elements = new Array();
$(".droppable").each(function(index, item){
  var id = $(item).attr("id"); //server will pass this back so you can select it later
  var height = $(item).css("height");
  var width = $(item).css("width");
   // etc.

  var item = { id: id, height: height, width: width };
  elements.push(item); //an array of objects
});

  $.ajax({
     url: "test.html",
     data: {elements: elements}
      success: function(data){ //data is returned by your server method
         // set the class on success 
      }
  });

使用jquery使用元素属性创建ajax请求

3 个答案: