Question

我正在开发一个Web应用程序，用户可以将div元素（其内容从数据库生成）拖放到首选顺序中。我希望用户能够在完成排列div时将其列表（按顺序）提交给服务器并将新订单存储在表中。我使用AJAX来执行此操作，但是我不确定这是否必要/正确的方法，因为我不需要异步更新页面（我只需要提交数据）。我尝试了各种方法以可用的格式将我的数组放到服务器上（它需要是可迭代的，并允许比较元素位置）。我尝试过使用JSON.stringify / parse，创建一个自定义对象，只需单独提交数组，依此类推。这是我的代码，最相关的位是makeRouteArray函数的底部。理想情况下，为了实现这一点，我想使用JavaScript（没有jQuery）。最后，请原谅我乱糟糟的代码，我正在学习。

// get two groups of elements, those that are draggable and those that are drop targets
let draggable = document.querySelectorAll('[draggable]');
let targets = document.querySelectorAll('[data-drop-target]');

// div immediately surrounding bus routes
var busList = document.getElementById("bus-list");
const button = document.getElementById("button");


// store the id of the draggable element when drag starts
function handleDragStart(e) {
  e.dataTransfer.setData("text", this.id); // sets 'text' value to equal the id of this
  this.classList.add("drag-start"); // class for styling the element being dragged, sets opacity
}

function handleDragEnd(e) {
  e.target.classList.remove('drag-start');
}

function handleDragEnterLeave(e) {
  // should provide visual feedback to user?
}

// handles dragover event (moving your source div over the target div element)
// If drop event occurs, the function retrieves the draggable element’s id from the DataTransfer object
function handleOverDrop(e) {
  e.preventDefault();

  var draggedId = e.dataTransfer.getData("text"); // retrieves drag data (DOMString) for specified type
  var draggedEl = document.getElementById(draggedId);

  draggedEl.parentNode.insertBefore(draggedEl, this); // inserts element being dragged into list

  var draggedArray = Array.from(draggedEl.parentNode.children); // creates new array which updates current location of each route
  e.target.classList.remove('drag-start'); // sets opacity back to 1

  // if (e.type === "drop") {
  //   // when dropped, update localstorage
  savePage(draggedArray);
  // }
}

// get each full bus-route div in #bus-list with p content as single arr item each

// called when item is dropped
function savePage(dArray) {
  // honestly i can't remember what this does precisely
  // but i can't seem to add to localstorage in the way i want without it
  var arr = Array.prototype.map.call(dArray, function(elem) {
    return elem.outerHTML;
  });
  localStorage.newList = JSON.stringify(arr); // have to stringify the array in order to add it to localstorage
}


// ideally it should just update the order of the bus routes to reflect local storage
// and add classes/ids to the divs etc. (hence using outerHTML)
function makePage() {
  // getting the item from localstorage
  var getData = localStorage.getItem("newList");

  // parsing it back into an array
  var parsedData = JSON.parse(getData);

  // string to hold contents of array so they can be display via innerHTML
  var fullList = "";
  if (localStorage.getItem("newList") === null) {
    return; // maybe this is wrong but if there's nothing in local storage, don't do anything
  } else {
    for (let i = 0; i < parsedData.length; i++) {
      fullList = fullList + parsedData[i];
    }
    busList.innerHTML = fullList;
    // reassigning targets after calling function in order to re-register event handlers
    draggable = document.querySelectorAll('[draggable]');
    targets = document.querySelectorAll('[data-drop-target]');
  }
}



// probably better way to do this
for (let i = 0; i < draggable.length; i++) {
  draggable[i].addEventListener("dragstart", handleDragStart);
  draggable[i].addEventListener("dragend", handleDragEnd);
}

// drop target elements
for (let i = 0; i < targets.length; i++) {
  targets[i].addEventListener("dragover", handleOverDrop);
  targets[i].addEventListener("drop", handleOverDrop);
  targets[i].addEventListener("dragenter", handleDragEnterLeave);
  targets[i].addEventListener("dragleave", handleDragEnterLeave);
}


// rolling average: new_average_score = old_average_score * (total_users-1)/total_users + user_route_rank/total_users
// user id, column per route (score)
// session id


// submit button to save changes to db
// when submit is clicked
// get current results from either local storage or from currently ordered + displayed list
// data will be in array format
// do i need AJAX to be able to submit something other than form data to a server?
  // is submitting data in this format (taken from page's HTML ordering) even possible?
// i'd prefer to not use jQuery
// how do i submit an array to the server (express) and then parse (?) it to make it useable?
// so far i have tried JSON.stringify/parse, making a custom object, just submitting array, etc.
// ultimately what i need is a data type that i can loop over and compare positions of stored elements


var makeRouteArray = function() {
  var currentOrderArr = Array.from(busList.children);
  var idData = currentOrderArr.map(function(el) {
    return Number(el.id.slice(2));
  });
  return idData; // not sure if having two return statements like this is okay
};


button.addEventListener("click", function(e) {
  var request = new XMLHttpRequest();

  request.open('POST', '/submit', true);
  request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
  request.send(data);
});

makePage();

makeRouteArray函数正在从HTML ul获取ID并剥离前两个字符，因为我只想使用这些数字（ID的结构为#r-num）。这些数字的数组是我想要提交给服务器的，如果可能的话，一旦在服务器上，将JSON对象返回到数组。

谢谢！

如何使用AJAX从客户端向服务器（ExpressJs）提交数组？

0 个答案: