通过Javascript调用“ POST”路由，这样我就可以更新数据库中的记录（使用node.js，express框架，PUG，mongodb）

Question

I'm trying to update a record in my database when a user decides to edit a table. I use javascript to make the table editable row by row and I change the button from 'Edit' to 'Save' image of table before a user can edit and image of table after a user clicks edit .

Once a user clicks'Save', I want to be able to call the route that will find the old record, and overwrite with the new record. I'm having troubles calling the route in my javascript. I've tried to use "location.href = '/people/updateshift'" but it doesn't because it load the people/update shift page, and I just want to be able to call the route in the background without sending a user to the page. Any resources, or pointers would be appreciated :)

Thank you in advance!

  function editRow(obj) {
      var currentTD = obj.parentNode.parentNode.rowIndex;
      var table = document.getElementById("myTableData");
      var row_length = document.getElementById("myTableData").rows[currentTD].cells.length;
      console.log(obj.parentNode);
      //the below is a way to get the HMTL within a cell
      console.log(document.getElementById("myTableData").rows[currentTD].cells[0].innerHTML);


      if (obj.value == 'Edit') {

        document.getElementById("myTableData").rows[currentTD].cells[0].setAttribute("contentEditable", true);
        document.getElementById("myTableData").rows[currentTD].cells[1].setAttribute("contentEditable", true);
        document.getElementById("myTableData").rows[currentTD].cells[2].setAttribute("contentEditable", true);
        document.getElementById("myTableData").rows[currentTD].cells[3].setAttribute("contentEditable", true);
        document.getElementById("myTableData").rows[currentTD].cells[4].setAttribute("contentEditable", true);
        document.getElementById("myTableData").rows[currentTD].cells[5].setAttribute("contentEditable", true);
        document.getElementById("myTableData").rows[currentTD].style.backgroundColor = "#A4D9F5";
        var_employeetype = document.getElementById("myTableData").rows[currentTD].cells[0].innerHTML
        var_daysworked = document.getElementById("myTableData").rows[currentTD].cells[1].innerHTML
        var_num_employees = document.getElementById("myTableData").rows[currentTD].cells[2].innerHTML
        var_shift_start = document.getElementById("myTableData").rows[currentTD].cells[3].innerHTML
        var_shift_start = document.getElementById("myTableData").rows[currentTD].cells[4].innerHTML
        var_shift_end = document.getElementById("myTableData").rows[currentTD].cells[5].innerHTML
        console.log(var_employeetype)
        obj.value = 'Save'

      } else {

        document.getElementById("myTableData").rows[currentTD].cells[0].setAttribute("contentEditable", false);
        document.getElementById("myTableData").rows[currentTD].cells[1].setAttribute("contentEditable", false);
        document.getElementById("myTableData").rows[currentTD].cells[2].setAttribute("contentEditable", false);
        document.getElementById("myTableData").rows[currentTD].cells[3].setAttribute("contentEditable", false);
        document.getElementById("myTableData").rows[currentTD].cells[4].setAttribute("contentEditable", false);
        document.getElementById("myTableData").rows[currentTD].cells[5].setAttribute("contentEditable", false);
        document.getElementById("myTableData").rows[currentTD].style.backgroundColor = "#FFFFFF"
        obj.value = 'Edit'
        location.href = '/people/updateshift'

      }

    }

Answer 1

You want to look into the jQuery "post" feature. https://api.jquery.com/jquery.post/

When the user clicks save, send the value to the server using $.post, and an identifier for which "cell" it is (I don't know how you are doing this), and then have your server deal with updating the record.