ajax修改資料javascript-前端問答-PHP中文網

在 Web 開發中，很多時候我們需要修改頁面上的數據，使其與後端伺服器的資料保持同步。這時候，Ajax 技術就可以派上用場了。

Ajax（Asynchronous JavaScript and XML）是一種在無需重新載入整個頁面的情況下，能夠更新局部內容的技術。它透過非同步通信，將資料傳輸到伺服器並更新頁面，從而實現局部刷新的效果。它使用了 JavaScript、XML、CSS 等技術，為現代 Web 開發提供了許多便利。

在 Ajax 技術中，最常用的就是 XmlHttpRequest 對象，可以透過該對象向伺服器發送請求，取得資料。同時，JavaScript 中也有很多函式庫可以方便地進行 Ajax 請求，如 jQuery、AngularJS、React 等。

下面我們來看看如何使用 Ajax 技術，實現頁面中的資料修改。

前端代碼

假設我們有一個清單頁面，其中展示了學生的信息，包括姓名、年齡、性別等。現在我們要為每個學生的資訊新增一個「編輯」按鈕，透過點擊該按鈕，可以彈出一個模態框，用於修改該學生的資訊。

首先，我們需要在頁面中新增「編輯」按鈕。在 HTML 中加入以下程式碼：

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

登入後複製

其中，data-id 屬性代表學生的 ID，可以在後續的 Ajax 請求中使用。

接下來，我們需要編寫 JavaScript 程式碼，為按鈕新增點擊事件，當使用者點擊時，打開模態框，並從伺服器取得該學生的資訊。在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("获取数据失败，请重试！");
    }
  });
});

登入後複製

上面的程式碼中，我們先透過$(this).data("id") 取得「編輯」按鈕的data- id 屬性，即學生的ID。然後，使用 jQuery 的 $.ajax() 方法發送 GET 請求，以取得該學生的資訊。在成功回呼函數中，將學生的資訊填入模態框中，並顯示模態框。

後端程式碼

在後端程式碼中，我們需要處理 Ajax 請求，並將查詢到的資料傳回前端。

假設我們使用 Node.js Express 作為後端框架，在 Express 中可以很方便地處理 Ajax 請求。首先，我們需要新增一個 GET 路由，用於查詢學生的資訊。在 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]);
    }
  });
});

登入後複製

上面的程式碼中，我們首先透過 req.params.id 取得學生的 ID。然後，使用資料庫查詢語句在資料庫中查詢該學生的資訊。如果查詢失敗，會傳回 500 狀態碼，表示伺服器錯誤；如果學生不存在，會傳回 404 狀態碼，表示該學生不存在；否則，將查詢到的學生資訊作為 JSON 物件傳回前端。

前端程式碼

在使用者修改完學生的資訊後，我們需要將修改儲存到伺服器。在 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("保存数据失败，请重试！");
    }
  });
});

登入後複製

上面的程式碼中，我們首先透過 $(".edit-btn").data("id") 取得目前學生的 ID。然後，取得使用者修改後的學生訊息，並使用 jQuery 的 $.ajax() 方法傳送 PUT 請求，將修改後的訊息傳遞給後端。

在後端程式碼中，我們需要新增一個 PUT 路由，用於保存修改後的學生資訊。在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("保存数据成功");
    }
  });
});

登入後複製

上面的程式碼中，我們先透過req.params.id 取得學生的ID，再透過req.body 取得修改後的學生資料。然後，使用資料庫更新語句更新該學生的訊息，並向前端傳回一個成功或失敗的訊息。

總結：

透過以上的程式碼實現，我們不僅可以在前端實現局部刷新，還可以在後端實現保存操作。同時，可以根據項目需求添加刪除等操作，使前端頁面的互動性更強，讓使用者的操作更加直覺。

以上是ajax修改資料javascript的詳細內容。更多資訊請關注PHP中文網其他相關文章！