ajax mengubah suai javascript data

Dalam pembangunan web, banyak kali kita perlu mengubah suai data pada halaman untuk memastikan ia disegerakkan dengan data pada pelayan bahagian belakang. Pada masa ini, teknologi Ajax boleh berguna.

Ajax (Asynchronous JavaScript and XML) ialah teknologi yang boleh mengemas kini sebahagian kandungan tanpa memuatkan semula keseluruhan halaman. Ia menghantar data ke pelayan dan mengemas kini halaman melalui komunikasi tak segerak, dengan itu mencapai kesan penyegaran separa. Ia menggunakan JavaScript, XML, CSS dan teknologi lain untuk menyediakan banyak kemudahan untuk pembangunan web moden.

Dalam teknologi Ajax, yang paling biasa digunakan ialah objek XmlHttpRequest, yang boleh digunakan untuk menghantar permintaan ke pelayan dan mendapatkan data. Pada masa yang sama, terdapat banyak perpustakaan dalam JavaScript yang boleh melaksanakan permintaan Ajax dengan mudah, seperti jQuery, AngularJS, React, dll.

Mari kita lihat cara menggunakan teknologi Ajax untuk mengubah suai data pada halaman.

1. Kod bahagian hadapan

Andaikan kami mempunyai halaman senarai yang memaparkan maklumat pelajar, termasuk nama, umur, jantina, dsb. Sekarang kita perlu menambah butang "Edit" pada setiap maklumat pelajar Dengan mengklik butang ini, kotak modal boleh muncul untuk mengubah suai maklumat pelajar.

Pertama, kita perlu menambah butang "Edit" pada halaman. Tambahkan kod berikut dalam HTML:

<button class="edit-btn" data-id="1">编辑</button>

Di mana, atribut data-id mewakili ID pelajar dan boleh digunakan dalam permintaan Ajax berikutnya.

Seterusnya, kita perlu menulis kod JavaScript untuk menambah acara klik pada butang Apabila pengguna mengklik, buka kotak modal dan dapatkan maklumat pelajar daripada pelayan. Tambahkan kod berikut dalam JavaScript:

// 为按钮添加点击事件
$(".edit-btn").click(function() {
  // 获取学生的 ID
  var id = $(this).data("id");
  
  // 发送 Ajax 请求，获取学生的信息
  $.ajax({
    url: "/students/" + id,  // 请求的地址
    type: "GET",             // 请求的方法
    success: function(data) {  // 请求成功后的回调函数
      // 将学生的信息填充到模态框中
      $("#name").val(data.name);
      $("#age").val(data.age);
      $("#gender").val(data.gender);
      
      // 显示模态框
      $("#modal").show();
    },
    error: function() {
      alert("获取数据失败，请重试！");
    }
  });
});

Dalam kod di atas, kami mula-mula mendapatkan atribut $(this).data("id") butang "Edit" melalui data-id, iaitu ID pelajar. Kemudian, gunakan kaedah $.ajax() jQuery untuk menghantar permintaan GET untuk mendapatkan maklumat pelajar. Dalam fungsi panggil balik kejayaan, isikan maklumat pelajar ke dalam kotak modal dan paparkan kotak modal.

2. Kod belakang

Dalam kod hujung belakang, kami perlu memproses permintaan Ajax dan mengembalikan data yang ditanya ke bahagian hadapan.

Andaikan kita menggunakan Node.js + Express sebagai rangka kerja belakang, permintaan Ajax boleh dikendalikan dengan mudah dalam Express. Pertama, kita perlu menambah laluan GET untuk menanyakan maklumat pelajar. Tambahkan kod berikut dalam Express:

app.get("/students/:id", function(req, res) {
  // 获取学生的 ID
  var id = req.params.id;
  
  // 在数据库中查询学生的信息
  db.query("SELECT * FROM students WHERE id = ?", [id], function(err, result) {
    if (err) {
      console.log("查询数据失败：", err);
      res.status(500).send("查询数据失败");
    } else if (result.length === 0) {
      res.status(404).send("学生不存在");
    } else {
      // 返回学生的信息
      res.json(result[0]);
    }
  });
});

Dalam kod di atas, kami mula-mula mendapatkan ID pelajar melalui req.params.id. Kemudian, gunakan pernyataan pertanyaan pangkalan data untuk menanyakan maklumat pelajar dalam pangkalan data. Jika pertanyaan gagal, kod status 500 akan dikembalikan, menunjukkan ralat pelayan jika pelajar tidak wujud, kod status 404 akan dikembalikan, menunjukkan bahawa pelajar tidak wujud, jika tidak, maklumat pelajar yang ditanya akan dikembalikan; ke hujung hadapan sebagai objek JSON.

3. Kod bahagian hadapan

Selepas pengguna mengubah suai maklumat pelajar, kami perlu menyimpan pengubahsuaian pada pelayan. Tambahkan kod berikut dalam JavaScript:

$("#save-btn").click(function() {
  // 获取学生的 ID
  var id = $(".edit-btn").data("id");
  
  // 获取修改后的学生信息
  var name = $("#name").val();
  var age = $("#age").val();
  var gender = $("#gender").val();
  
  // 发送 Ajax 请求，保存修改后的学生信息
  $.ajax({
    url: "/students/" + id,  // 请求的地址
    type: "PUT",             // 请求的方法
    data: {                  // 请求的数据
      name: name,
      age: age,
      gender: gender
    },
    success: function() {    // 请求成功后的回调函数
      alert("修改成功！");
    },
    error: function() {
      alert("保存数据失败，请重试！");
    }
  });
});

Dalam kod di atas, kami mula-mula mendapatkan ID pelajar semasa melalui $(".edit-btn").data("id"). Kemudian, dapatkan maklumat pelajar yang diubah suai pengguna dan gunakan kaedah $.ajax() jQuery untuk menghantar permintaan PUT untuk menghantar maklumat yang diubah suai ke bahagian belakang.

Dalam kod bahagian belakang, kami perlu menambah laluan PUT untuk menyimpan maklumat pelajar yang diubah suai. Tambahkan kod berikut dalam Express:

app.put("/students/:id", function(req, res) {
  // 获取学生的 ID
  var id = req.params.id;
  
  // 获取修改后的学生信息
  var name = req.body.name;
  var age = req.body.age;
  var gender = req.body.gender;
  
  // 在数据库中更新学生的信息
  db.query("UPDATE students SET name = ?, age = ?, gender = ? WHERE id = ?", [name, age, gender, id], function(err) {
    if (err) {
      console.log("保存数据失败：", err);
      res.status(500).send("保存数据失败");
    } else {
      res.send("保存数据成功");
    }
  });
});

Dalam kod di atas, kami mula-mula mendapatkan ID pelajar melalui req.params.id, dan kemudian mendapatkan maklumat pelajar yang diubah suai melalui req.body. Kemudian, gunakan pernyataan kemas kini pangkalan data untuk mengemas kini maklumat pelajar dan mengembalikan mesej kejayaan atau kegagalan ke bahagian hadapan.

Ringkasan:

Melalui pelaksanaan kod di atas, kami bukan sahaja boleh mencapai muat semula separa pada bahagian hadapan, tetapi juga melaksanakan operasi simpan pada bahagian belakang. Pada masa yang sama, operasi seperti pemadaman dan pemadaman boleh ditambah mengikut keperluan projek, menjadikan halaman hadapan lebih interaktif dan menjadikan operasi pengguna lebih intuitif.

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