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=""。有关其他选项，请参见：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发布请求后刷新表

1 个答案: