怎么使用ajax修改數據

這篇文章主要介紹“怎么使用ajax修改數據”，在日常操作中，相信很多人在怎么使用ajax修改數據問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么使用ajax修改數據”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

1. 前端代碼

假設我們有一個列表頁面，其中展示了學生的信息，包括姓名、年齡、性別等。現在我們要給每個學生的信息添加一個“編輯”按鈕，通過點擊該按鈕，可以彈出一個模態框，用于修改該學生的信息。

首先，我們需要在頁面中添加“編輯”按鈕。在 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 請求，獲取該學生的信息。在成功回調函數中，將學生的信息填充到模態框中，并顯示模態框。

2. 后端代碼

在后端代碼中，我們需要處理 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 對象返回給前端。

3. 前端代碼

在用戶修改完學生的信息后，我們需要將修改保存到服務器。在 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修改數據”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！