javascript - How do I submit an array from the client to a server (ExpressJs) using AJAX? -

i'm working on web application in user can drag , drop div elements, content generated database, preferred order. want user able to, when finished arranging divs, submit list (in order) server , store new order in table. i'm using ajax this, i'm not sure if necessary/the proper way this, since don't need asynchronously update page (i need submit data). i've tried variety of methods array server in usable format (it needs iterable , allow element locations compared). have tried using json.stringify/parse, creating custom object, submitting array on own, , on. here code, relevant bits towards bottom makeroutearray function. ideally accomplish use javascript (no jquery). finally, please excuse messy code, i'm learning.

// 2 groups of elements, draggable , drop targets let draggable = document.queryselectorall('[draggable]'); let targets = document.queryselectorall('[data-drop-target]');  // div surrounding bus routes var buslist = document.getelementbyid("bus-list"); const button = document.getelementbyid("button");   // store id of draggable element when drag starts function handledragstart(e) {   e.datatransfer.setdata("text", this.id); // sets 'text' value equal id of   this.classlist.add("drag-start"); // class styling element being dragged, sets opacity }  function handledragend(e) {   e.target.classlist.remove('drag-start'); }  function handledragenterleave(e) {   // should provide visual feedback user? }  // handles dragover event (moving source div on target div element) // if drop event occurs, function retrieves draggable element’s id datatransfer object function handleoverdrop(e) {   e.preventdefault();    var draggedid = e.datatransfer.getdata("text"); // retrieves drag data (domstring) specified type   var draggedel = document.getelementbyid(draggedid);    draggedel.parentnode.insertbefore(draggedel, this); // inserts element being dragged list    var draggedarray = array.from(draggedel.parentnode.children); // creates new array updates current location of each route   e.target.classlist.remove('drag-start'); // sets opacity 1    // if (e.type === "drop") {   //   // when dropped, update localstorage   savepage(draggedarray);   // } }  // each full bus-route div in #bus-list p content single arr item each  // called when item dropped function savepage(darray) {   // can't remember precisely   // can't seem add localstorage in way want without   var arr = array.prototype.map.call(darray, function(elem) {     return elem.outerhtml;   });   localstorage.newlist = json.stringify(arr); // have stringify array in order add localstorage }   // ideally should update order of bus routes reflect local storage // , add classes/ids divs etc. (hence using outerhtml) function makepage() {   // getting item localstorage   var getdata = localstorage.getitem("newlist");    // parsing array   var parseddata = json.parse(getdata);    // string hold contents of array can display via innerhtml   var fulllist = "";   if (localstorage.getitem("newlist") === null) {     return; // maybe wrong if there's nothing in local storage, don't   } else {     (let = 0; < parseddata.length; i++) {       fulllist = fulllist + parseddata[i];     }     buslist.innerhtml = fulllist;     // reassigning targets after calling function in order re-register event handlers     draggable = document.queryselectorall('[draggable]');     targets = document.queryselectorall('[data-drop-target]');   } }    // better way (let = 0; < draggable.length; i++) {   draggable[i].addeventlistener("dragstart", handledragstart);   draggable[i].addeventlistener("dragend", handledragend); }  // drop target elements (let = 0; < 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 save changes db // when submit clicked // current results either local storage or ordered + displayed list // data in array format // need ajax able submit other form data server?   // submitting data in format (taken page's html ordering) possible? // i'd prefer not use jquery // how submit array server (express) , parse (?) make useable? // far have tried json.stringify/parse, making custom object, submitting array, etc. // need data type can loop on , 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 2 return statements 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(); 

the makeroutearray function taking ids html ul , stripping them of first 2 characters because want use numbers (the ids structured #r-num). array of these numbers submit server , if possible, once on server, return json object array.

thanks!