ajax modify data javascript

In web development, many times we need to modify the data on the page to keep it synchronized with the data on the back-end server. At this time, Ajax technology can come in handy.

Ajax (Asynchronous JavaScript and XML) is a technology that can update partial content without reloading the entire page. It transmits data to the server and updates the page through asynchronous communication, thereby achieving the effect of partial refresh. It uses JavaScript, XML, CSS and other technologies to provide a lot of convenience for modern web development.

In Ajax technology, the most commonly used is the XmlHttpRequest object, through which a request can be sent to the server to obtain data. At the same time, there are many libraries in JavaScript that can easily perform Ajax requests, such as jQuery, AngularJS, React, etc.

Let’s take a look at how to use Ajax technology to modify the data in the page.

1. Front-end code

Suppose we have a list page that displays student information, including name, age, gender, etc. Now we need to add an "Edit" button to each student's information. By clicking this button, a modal box can pop up to modify the student's information.

First, we need to add an "Edit" button to the page. Add the following code to the HTML:

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

where the data-id attribute represents the student's ID and can be used in subsequent Ajax requests.

Next, we need to write JavaScript code to add a click event to the button. When the user clicks, open the modal box and obtain the student's information from the server. Add the following code in 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("获取数据失败，请重试！");
    }
  });
});

In the above code, we first get the data- of the "Edit" button through $(this).data("id") id attribute, which is the student's ID. Then, use jQuery’s $.ajax() method to send a GET request to obtain the student’s information. In the success callback function, fill the student's information into the modal box and display the modal box.

2. Backend code

In the backend code, we need to process the Ajax request and return the queried data to the front end.

Suppose we use Node.js Express as the back-end framework. Ajax requests can be easily processed in Express. First, we need to add a GET route to query student information. Add the following code in 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]);
    }
  });
});

In the above code, we first obtain the student's ID through req.params.id. Then, use the database query statement to query the student's information in the database. If the query fails, a 500 status code will be returned, indicating a server error; if the student does not exist, a 404 status code will be returned, indicating that the student does not exist; otherwise, the queried student information will be returned to the front end as a JSON object.

3. Front-end code

After the user modifies the student's information, we need to save the modification to the server. Add the following code in 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("保存数据失败，请重试！");
    }
  });
});

In the above code, we first obtain the ID of the current student through $(".edit-btn").data("id"). Then, obtain the user's modified student information, and use jQuery's $.ajax() method to send a PUT request to pass the modified information to the backend.

In the back-end code, we need to add a PUT route to save the modified student information. Add the following code in 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("保存数据成功");
    }
  });
});

In the above code, we first obtain the student's ID through req.params.id, and then obtain it through req.body Modified student information. Then, use a database update statement to update the student's information and return a success or failure message to the front end.

Summary:

Through the above code implementation, we can not only achieve partial refresh on the front end, but also implement save operations on the back end. At the same time, operations such as deletion and deletion can be added according to project needs, making the front-end page more interactive and making user operations more intuitive.

The above is the detailed content of ajax modify data javascript. For more information, please follow other related articles on the PHP Chinese website!