ajax padam javascript data-Soal Jawab bahagian hadapan-php.cn

ajax padam javascript data

WBOY

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

asal

769 orang telah melayarinya

Dengan perkembangan pesat Internet dan kemajuan berterusan teknologi IT, teknologi ajax digunakan dalam banyak aplikasi web untuk melaksanakan fungsi penyegaran separa, sekali gus meningkatkan pengalaman pengguna dan kelajuan tindak balas halaman. Dalam sesetengah senario di mana data perlu dipadamkan, ajax juga boleh digunakan untuk melaksanakan operasi pemadaman, supaya tidak perlu memuat semula keseluruhan halaman, dan pengguna juga boleh melihat kesan pemadaman serta-merta pada halaman.

Artikel ini akan memperkenalkan cara menggunakan teknologi javascript dan ajax untuk memadamkan data.

Langkah 1: Tulis fail HTML

Mula-mula, buat fail HTML secara setempat atau pada pelayan, dan tulis kod HTML asas serta gaya yang berkaitan. Tetapkan butang pada halaman untuk mencetuskan operasi pemadaman, dan setiap kemasukan data yang perlu dipadamkan mempunyai butang padam yang sepadan. Selain itu, jadual data perlu diberikan untuk memaparkan data, seperti yang ditunjukkan dalam kod berikut:

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

Salin selepas log masuk

Dalam kod di atas, kami menggunakan jadual data untuk memaparkan data dan setiap baris mempunyai pemadaman Dengan menetapkan atribut data-id, anda boleh mengetahui bahagian data yang ingin anda padamkan. Antaranya, butang padam-semua boleh memadam semua data sekaligus.

Langkah 2: Tulis kod javascript

Seterusnya, perkenalkan fail ajax.js dan fail main.js ke dalam fail HTML untuk mengendalikan permintaan ajax dan logik interaksi halaman masing-masing.

Kod fail ajax.js adalah seperti berikut:

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));
}

Salin selepas log masuk

Dalam fail ajax.js, kami mentakrifkan fungsi ajax untuk menghantar permintaan dan menerima respons. Antaranya, kaedah mewakili kaedah permintaan, url mewakili URL yang diminta, data mewakili parameter permintaan, kejayaan mewakili fungsi panggil balik apabila permintaan berjaya, dan ralat mewakili fungsi panggil balik apabila permintaan gagal. Fungsi ini menggunakan objek XMLHttpRequest secara dalaman untuk menghantar permintaan, menetapkan parameter permintaan dan fungsi panggil balik, dan akhirnya menghantar permintaan melalui kaedah hantar.

Seterusnya ialah kod fail main.js, yang digunakan untuk mengikat acara butang dan mengendalikan interaksi halaman:

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);
    });
  });
};

Salin selepas log masuk

Dalam fail main.js, kami menggunakan window.onload acara untuk mengikat acara Butang pada halaman yang ditentukan. Antaranya, kaedah querySelectorAll dan forEach digunakan untuk mendapatkan semua butang padam dan memadam semua butang data masing-masing, dan mengikat peristiwa klik padanya. Apabila pengguna mengklik butang padam, fungsi deleteData dipanggil, yang menghantar permintaan DELETE untuk memadamkan kemasukan data yang ditentukan.

Langkah 3: Tulis kod bahagian pelayan

Akhir sekali, tulis antara muka API RESTful pada bahagian pelayan untuk menyediakan sokongan untuk operasi pemadaman. Memandangkan bahasa dan rangka kerja bahagian pelayan yang berbeza melaksanakan kaedah yang berbeza, di sini kami hanya menyediakan pseudokod untuk rujukan:

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

Salin selepas log masuk

Dalam pseudokod di atas, kami menggunakan rangka kerja kelalang Python untuk membina antara muka API yang mudah, di mana data untuk dipadam ditentukan melalui parameter id dalam fungsi delete_api, manakala semua data dipadamkan dalam fungsi delete_all_api. Hanya pseudokod disediakan di sini, pembaca boleh menulis kod sebelah pelayan tertentu mengikut situasi sebenar mereka.

Ringkasan

Artikel ini memperkenalkan cara menggunakan teknologi javascript dan ajax untuk memadam data, dan juga menyediakan pseudokod berasaskan kelalang untuk rujukan. Dalam pembangunan sebenar, kod yang sepadan perlu ditulis mengikut keperluan khusus, dan isu-isu seperti keselamatan, prestasi dan pengalaman pengguna perlu diberi perhatian. Melalui penggunaan teknologi ajax yang munasabah, kami boleh menyediakan pengguna dengan pengalaman WEB yang lebih lancar dan lebih baik, dan meningkatkan kecekapan pembangunan dan kualiti kod kami sendiri.

Atas ialah kandungan terperinci ajax padam javascript data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!