Ajax Daten löschen Javascript-Front-End-Fragen und Antworten-php.cn

Ajax Daten löschen Javascript

WBOY

Freigeben： 2023-05-09 09:16:37

Original

761 Leute haben es durchsucht

Angesichts der rasanten Entwicklung des Internets und der kontinuierlichen Weiterentwicklung der IT-Technologie wird Ajax-Technologie in vielen Webanwendungen verwendet, um die Teilaktualisierungsfunktion zu implementieren und so das Benutzererlebnis und die Seitenantwortgeschwindigkeit zu verbessern. In einigen Szenarien, in denen Daten gelöscht werden müssen, kann Ajax auch zum Ausführen des Löschvorgangs verwendet werden, sodass nicht die gesamte Seite aktualisiert werden muss und der Benutzer den Löscheffekt auch sofort auf der Seite sehen kann.

In diesem Artikel wird erläutert, wie Sie mithilfe der Javascript- und Ajax-Technologie Daten löschen.

Schritt eins: HTML-Datei schreiben

Erstellen Sie zunächst eine HTML-Datei lokal oder auf dem Server, schreiben Sie grundlegenden HTML-Code und zugehörige Stile. Legen Sie auf der Seite eine Schaltfläche fest, um den Löschvorgang auszulösen. Jeder Dateneintrag, der gelöscht werden muss, verfügt über eine entsprechende Schaltfläche zum Löschen. Darüber hinaus muss eine Datentabelle gerendert werden, um die Daten anzuzeigen, wie im folgenden Code gezeigt:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Ajax删除数据示例</title>
    <style>
      table {
          border-collapse: collapse;
          margin:auto;
      }

      th, td {
        padding: 10px;
        border: 1px solid black;
      }

      button {
          background-color: #4CAF50;
          color: white;
          padding: 10px;
          border: none;
          cursor: pointer;
          margin-top: 15px;
      }

      button:hover {
          opacity: 0.8;
      }
    </style>
  </head>
  <body>
    <h2>Ajax删除数据示例</h2>

    <table>
      <thead>
        <tr>
          <th>用户名</th>
          <th>邮箱</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>zhangsan@gmail.com</td>
          <td><button class="delete" data-id="1">删除</button></td>
        </tr>
        <tr>
          <td>李四</td>
          <td>lisi@gmail.com</td>
          <td><button class="delete" data-id="2">删除</button></td>
        </tr>
        <tr>
          <td>王五</td>
          <td>wangwu@gmail.com</td>
          <td><button class="delete" data-id="3">删除</button></td>
        </tr>
      </tbody>
    </table>

    <button id="delete-all">删除所有数据</button>

    <script src="js/ajax.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

Nach dem Login kopieren

Im obigen Code verwenden wir eine Datentabelle, um die Daten anzuzeigen, und jede Zeile verfügt über eine Schaltfläche zum Löschen, je nach Einstellung Mit dem data-id-Attribut können Sie wissen, welche Daten Sie löschen möchten. Mit der Schaltfläche „Alle löschen“ können Sie alle Daten auf einmal löschen.

Schritt 2: Javascript-Code schreiben

Fügen Sie als Nächstes eine ajax.js-Datei und eine main.js-Datei in die HTML-Datei ein, um Ajax-Anfragen bzw. Seiteninteraktionslogik zu verarbeiten.

Der Code der ajax.js-Datei lautet wie folgt:

function ajax(method, url, data, success, error) {
  let xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  xhr.setRequestHeader("Content-type", "application/json");
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      if (xhr.status == 200 || xhr.status == 304) {
        success(xhr.responseText);
      } else {
        error(xhr.status);
      }
    }
  };
  xhr.send(JSON.stringify(data));
}

Nach dem Login kopieren

In der ajax.js-Datei definieren wir eine Ajax-Funktion zum Senden von Anfragen und Empfangen von Antworten. Unter diesen stellt Methode die Anforderungsmethode dar, URL stellt die angeforderte URL dar, Daten stellen die Anforderungsparameter dar, Erfolg stellt die Rückruffunktion dar, wenn die Anforderung erfolgreich ist, und Fehler stellt die Rückruffunktion dar, wenn die Anforderung fehlschlägt. Diese Funktion verwendet intern das XMLHttpRequest-Objekt zum Senden der Anforderung, legt die Anforderungsparameter und die Rückruffunktion fest und sendet die Anforderung schließlich über die Sendemethode.

Als nächstes kommt der Code der main.js-Datei, der zum Binden von Schaltflächenereignissen und zum Verarbeiten von Seiteninteraktionen verwendet wird:

function deleteData(id) {
  ajax(
    "DELETE",
    "/api/data/" + id,
    {}, // 请求参数
    function(responseText) {
      // 删除成功，刷新页面
      location.reload();
    },
    function(status) {
      // 请求失败
      console.log(status);
    }
  );
}

window.onload = function() {
  let deleteAllBtn = document.querySelector("#delete-all");
  let deleteBtns = document.querySelectorAll(".delete");
  // 删除所有数据
  deleteAllBtn.addEventListener("click", function() {
    ajax(
      "DELETE",
      "/api/data/all",
      {}, // 请求参数
      function(responseText) {
        // 删除成功，刷新页面
        location.reload();
      },
      function(status) {
        // 请求失败
        console.log(status);
      }
    );
  });
  // 删除单个数据
  deleteBtns.forEach(function(btn) {
    btn.addEventListener("click", function() {
      let id = this.getAttribute("data-id");
      deleteData(id);
    });
  });
};

Nach dem Login kopieren

In der main.js-Datei verwenden wir das window.onload-Ereignis, um Schaltflächenereignisse auf der Seite zu binden . Unter diesen werden die Methoden querySelectorAll und forEach verwendet, um alle Löschschaltflächen bzw. alle Datenschaltflächen abzurufen und Klickereignisse daran zu binden. Wenn der Benutzer auf die Schaltfläche „Löschen“ klickt, wird die Funktion „deleteData“ aufgerufen, die eine DELETE-Anfrage sendet, um den angegebenen Dateneintrag zu löschen.

Schritt 3: Schreiben Sie serverseitigen Code

Schreiben Sie abschließend eine RESTful-API-Schnittstelle auf der Serverseite, um Löschvorgänge zu unterstützen. Da verschiedene serverseitige Sprachen und Frameworks unterschiedliche Methoden implementieren, stellen wir hier nur einen Pseudocode als Referenz bereit:

import flask
app = flask.Flask(__name__)

@app.route('/api/data/<int:id>', methods=['DELETE'])
def delete_api(id):
   # 连接数据库并删除指定的数据
   return 'ok'

@app.route('/api/data/all', methods=['DELETE'])
def delete_all_api():
   # 连接数据库并删除所有数据
   return 'ok'

if __name__ == '__main__':
   app.run()

Nach dem Login kopieren

Im obigen Pseudocode verwenden wir das Flask-Framework von Python, um eine einfache API-Schnittstelle zu erstellen, in der In der Funktion delete_api Der Parameter id wird verwendet, um die zu löschenden Daten anzugeben, während in der Funktion delete_all_api alle Daten gelöscht werden. Hier wird nur ein Pseudocode bereitgestellt. Leser können entsprechend ihrer tatsächlichen Situation spezifischen serverseitigen Code schreiben.

Zusammenfassung

In diesem Artikel wird die Verwendung von Javascript und Ajax-Technologie zum Löschen von Daten vorgestellt und außerdem ein flaschenbasierter Pseudocode als Referenz bereitgestellt. In der tatsächlichen Entwicklung muss der entsprechende Code entsprechend den spezifischen Anforderungen geschrieben und auf Aspekte wie Sicherheit, Leistung und Benutzererfahrung geachtet werden. Durch den sinnvollen Einsatz der Ajax-Technologie können wir Benutzern ein reibungsloseres und besseres WEB-Erlebnis bieten und unsere eigene Entwicklungseffizienz und Codequalität verbessern.

Das obige ist der detaillierte Inhalt vonAjax Daten löschen Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!