Ajax 데이터 수정 자바스크립트

웹 개발에서는 백엔드 서버의 데이터와 동기화를 유지하기 위해 페이지의 데이터를 수정해야 하는 경우가 많습니다. 이때 Ajax 기술이 도움이 될 수 있습니다.

Ajax(Asynchronous JavaScript and XML)는 전체 페이지를 다시 로드하지 않고도 부분 콘텐츠를 업데이트할 수 있는 기술입니다. 비동기 통신을 통해 서버에 데이터를 전송하고 페이지를 업데이트함으로써 부분 새로 고침 효과를 얻습니다. JavaScript, XML, CSS 및 기타 기술을 사용하여 최신 웹 개발에 많은 편의를 제공합니다.

Ajax 기술에서 가장 일반적으로 사용되는 것은 서버에 요청을 보내고 데이터를 얻는 데 사용할 수 있는 XmlHttpRequest 객체입니다. 동시에 jQuery, AngularJS, React 등과 같이 Ajax 요청을 쉽게 수행할 수 있는 JavaScript 라이브러리가 많이 있습니다.

Ajax 기술을 사용하여 페이지의 데이터를 수정하는 방법을 살펴보겠습니다.

1. 프런트 엔드 코드

이름, 나이, 성별 등을 포함한 학생 정보를 표시하는 목록 페이지가 있다고 가정해 보겠습니다. 이제 각 학생의 정보에 "수정" 버튼을 추가해야 합니다. 이 버튼을 클릭하면 학생 정보를 수정할 수 있는 모달 상자가 나타납니다.

먼저 페이지에 "편집" 버튼을 추가해야 합니다. HTML에 다음 코드를 추가하세요.

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

여기서 data-id 속성은 학생 ID를 나타내며 후속 Ajax 요청에 사용될 수 있습니다. 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

다음으로, 사용자가 클릭하면 모달 상자를 열고 서버에서 학생의 정보를 가져오는 JavaScript 코드를 작성해야 합니다. JavaScript에 다음 코드를 추가하세요.

rrreee

위 코드에서는 먼저 $(this).data("id")를 통해 "Edit" 버튼의 data-id를 얻습니다. code> code> 속성으로, 학생의 ID입니다. 그런 다음 jQuery의 $.ajax() 메서드를 사용하여 GET 요청을 보내 학생 정보를 가져옵니다. 성공 콜백 함수에서 모달박스에 학생의 정보를 입력하고 모달박스를 표시합니다.

백엔드 코드🎜🎜🎜백엔드 코드에서는 Ajax 요청을 처리하고 쿼리된 데이터를 프런트엔드로 반환해야 합니다. 🎜🎜Node.js + Express를 백엔드 프레임워크로 사용한다고 가정하면 Ajax 요청은 Express에서 쉽게 처리될 수 있습니다. 먼저 학생 정보를 쿼리하기 위해 GET 경로를 추가해야 합니다. Express에 다음 코드를 추가합니다. 🎜rrreee🎜위 코드에서는 먼저 req.params.id를 통해 학생 ID를 얻습니다. 그런 다음 데이터베이스 쿼리 문을 사용하여 데이터베이스에 있는 학생 정보를 쿼리합니다. 쿼리가 실패하면 서버 오류를 나타내는 500 상태 코드가 반환되고, 학생이 존재하지 않으면 쿼리된 학생 정보가 반환된다는 것을 나타내는 404 상태 코드가 반환됩니다. JSON 개체로 프런트 엔드에 추가됩니다. 🎜
🎜프런트엔드 코드🎜🎜🎜사용자가 학생 정보를 수정한 후에는 수정 사항을 서버에 저장해야 합니다. JavaScript에 다음 코드를 추가합니다. 🎜rrreee🎜위 코드에서는 먼저 $(".edit-btn").data("id")를 통해 현재 학생의 ID를 얻습니다. 그런 다음 사용자의 수정된 학생 정보를 가져오고 jQuery의 $.ajax() 메서드를 사용하여 수정된 정보를 백엔드에 전달하기 위한 PUT 요청을 보냅니다. 🎜🎜수정된 학생 정보를 저장하려면 백엔드 코드에 PUT 경로를 추가해야 합니다. Express에 다음 코드를 추가하세요. 🎜rrreee🎜위 코드에서는 먼저 req.params.id를 통해 학생 ID를 얻은 다음 req.body를 통해 수정된 버전을 얻습니다. 코드> 학생정보입니다. 그런 다음 데이터베이스 업데이트 문을 사용하여 학생 정보를 업데이트하고 성공 또는 실패 메시지를 프런트 엔드에 반환합니다. 🎜🎜요약: 🎜🎜위의 코드 구현을 통해 프런트 엔드에서 부분 새로 고침을 달성할 수 있을 뿐만 아니라 백 엔드에서 저장 작업도 구현할 수 있습니다. 동시에 프로젝트 필요에 따라 삭제 및 삭제와 같은 작업을 추가할 수 있어 프런트엔드 페이지를 더욱 대화식으로 만들고 사용자 작업을 보다 직관적으로 만들 수 있습니다. 🎜

위 내용은 Ajax 데이터 수정 자바스크립트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!