成功的axios發布請求后刷新表

Question

這是我來自axios的示例請求響應。

var data = [
    {
        id: "1",
        name: "john",
        username: "john doe",
        birthdate: "1999-05-21",
        age: "20",
        email: "test@gmail.com",
    },
    {
        id: "2",
        name: "sally",
        username: "sally mcsalad",
        birthdate: "1999-03-27",
        age: "20",
        email: "try@gmail.com",
    },
];

這是我的表代碼，用於在axios調用后顯示數據

<table class="table">
    <thead>
          <tr>
              <th scope="col">Name</th>
              <th scope="col">Username</th>
              <th scope="col">Birthdate</th>
              <th scope="col">Age</th>
              <th scope="col">Email</th>
           </tr>
    </thead>

    <tbody>
     <!-- existing data could optionally be included here -->
    </tbody>
  </table>

   <template id="persons">
         <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
         </tr>
    </template>

我設法使用此代碼在表中顯示數據

let oCRUD = {

    init: function() {
        this.setDOMElements();
        this.getPersons();
    },

    // Setting DOM Elements
    setDOMElements: function() {
        this.oTemplate = document.querySelector('#persons'); //persons row
        this.oTbody =  document.querySelector("tbody");
        this.oClone = document.importNode(oCRUD.oTemplate.content, true);
        this.oTd = oCRUD.oClone.querySelectorAll("td");
    },   

    refreshClone: function() {
      this.oClone = document.importNode(oCRUD.oTemplate.content, true);
      this.oTd = oCRUD.oClone.querySelectorAll("td");
    },

    getPersons: function() {
        /*axios.get('selectAll.php')
        .then(function (response) {*/
           data.forEach((element,index) => {
             oCRUD.refreshClone();
             oCRUD.oTd[0].textContent = element.name;
             oCRUD.oTd[1].textContent = element.username;
             oCRUD.oTd[2].textContent = element.birthdate;
             oCRUD.oTd[3].textContent = element.age;
             oCRUD.oTd[4].textContent = element.email;
             oCRUD.oTbody.appendChild(oCRUD.oClone);
        });

        /*})
        .catch(function (error) {
            console.log(error);
        });*/
    }
}

// call the init function
oCRUD.init();

現在，我在axios中有發布請求以將數據插入服務器。

 let person = {
            name: 'test1',
            username: 'test2',
            birthdate: '1999-01-25',
            age: '20',
            email: 'test@gmail.com'
        }

        axios.post('insert.php', person)
        .then(function (response) {
            oCRUD.getPersons(); // to refresh the table
            console.log(response.data);
        })
        .catch(function (error) {
            console.log(error);
        });

成功的axios發布請求之后。 我現在正在服務器上發送測試數據。 之后，我想刷新表，所以我在axios post請求中調用該函數。

oCRUD.getPersons(); // to refresh the table

調用該函數后，表中的數據將變為兩倍。 它不會添加已插入的最新數據。 我怎樣才能解決這個問題？ 提前謝謝你。

Answer 1

您需要清除現有數據，然后再返回作為完整列表的插入之后重新填充。 為了簡單起見，我使用了innerHTML="" 。 有關其他選項，請參見： 在JavaScript中清空節點的最佳方法是什么？

let oCRUD = {

    init: function() {
        this.setDOMElements();
        this.getPersons();
    },

    // Setting DOM Elements
    setDOMElements: function() {
        this.oTemplate = document.querySelector('#persons'); //persons row
        this.oTbody =  document.querySelector("tbody");
        this.oClone = document.importNode(oCRUD.oTemplate.content, true);
        this.oTd = oCRUD.oClone.querySelectorAll("td");
    },   

    refreshClone: function() {
      this.oClone = document.importNode(oCRUD.oTemplate.content, true);
      this.oTd = oCRUD.oClone.querySelectorAll("td");
    },

    getPersons: function() {
        /*axios.get('selectAll.php')
        .then(function (response) {*/
           //Makesure TBODY is empty
           oTbody.innerHTML = "";
           data.forEach((element,index) => {
             oCRUD.refreshClone();
             oCRUD.oTd[0].textContent = element.name;
             oCRUD.oTd[1].textContent = element.username;
             oCRUD.oTd[2].textContent = element.birthdate;
             oCRUD.oTd[3].textContent = element.age;
             oCRUD.oTd[4].textContent = element.email;
             oCRUD.oTbody.appendChild(oCRUD.oClone);
        });

        /*})
        .catch(function (error) {
            console.log(error);
        });*/
    }
}

// call the init function
oCRUD.init();