成功的axios发布请求后刷新表 [英] Refresh table after a successful axios post request

问题描述

这是我来自axios的示例请求响应.

This is my sample request response coming from the axios.

var data = [
    {
        id: "1",
        name: "john",
        username: "john doe",
        birthdate: "1999-05-21",
        age: "20",
        email: "[e-mail]",
    },
    {
        id: "2",
        name: "sally",
        username: "sally mcsalad",
        birthdate: "1999-03-27",
        age: "20",
        email: "[e-mail]",
    },
];

这是我的表代码，用于在axios调用后显示数据

This is my table code to display the data after the axios call

<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>

我设法使用此代码在表格中显示数据

I manage to display the data in the table using this code

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中有一个发布请求，可以将数据插入服务器中.

Now, Im having a post request in axios to insert the data in server.

 let person = {
            name: 'test1',
            username: 'test2',
            birthdate: '1999-01-25',
            age: '20',
            email: '[e-mail]'
        }

        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请求中调用该函数.

After a successful axios post request. I am now sending the test data on the server. After it, I want to refresh the table so I call the function inside the axios post request.

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

调用该函数后，表中的数据将变为两倍.它不会添加最近插入的数据.我怎样才能解决这个问题?预先谢谢你.

After the function was called the data inside the table becomes double. It doesn't add the recent data that has been inserted. How can i Fix this? Advance thank you.

推荐答案

您需要清除现有数据，然后再返回作为完整列表的插入之后重新填充.为了简单起见，我使用了innerHTML="".有关其他选项，请参见:什么是最佳方法清空JavaScript中的节点

You need to clear the existing data before repopulating after the insert as a full list is returned. I've used innerHTML="" for simplicity sake. For other option see: What is the best way to empty a node in 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();

这篇关于成功的axios发布请求后刷新表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！