Ajax修改数据即时显示篇实现代码

以下是“Ajax修改数据即时显示篇实现代码”的完整攻略。

简介

Ajax是一种用于创建快速动态网页的技术，实现了无需重载整个页面就能更新部分页面的内容。这种技术通常用于异步更新数据，这就是该篇文章要介绍的实现代码。

步骤

1. 编写HTML代码，包含需要更新的数据和表单：

<div id="data">原始数据</div>

<form id="form">
  <input type="text" name="newData">
  <input type="submit" value="修改">
</form>

1. 配置Ajax请求，将数据提交到服务器：

const form = document.getElementById("form");

form.addEventListener("submit", function(event) {
  event.preventDefault();

  const formData = new FormData(form);

  const xhr = new XMLHttpRequest();
  xhr.open("POST", "/updateData");
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send(formData);
});

1. 编写服务器端代码，接收Ajax请求并更新数据：

const express = require("express");
const app = express();

app.post("/updateData", function(req, res) {
  const newData = req.body.newData;

  // 更新数据的代码

  res.send("OK");
});

1. 在Ajax的回调函数中，更新页面上的数据：

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      const response = xhr.responseText;
      document.getElementById("data").innerHTML = response;
    } else {
      console.error("请求出错");
    }
  }
};

示例1：更改文字颜色

下面的示例会更改文字颜色。首先需要给文字加上一个ID：

<div id="text" style="color:black;">原始文本</div>

然后，在服务器端代码中更新数据：

app.post("/updateData", function(req, res) {
  const newData = req.body.newData;

  // 更改文字颜色
  const color = newData;
  const response = `<span style="color:${color};">修改后的文本</span>`;

  res.send(response);
});

最后，在Ajax回调函数中更新页面上的文字：

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      const response = xhr.responseText;
      document.getElementById("text").innerHTML = response;
    } else {
      console.error("请求出错");
    }
  }
};

现在，你可以在表单中输入颜色，点击“修改”按钮，文字颜色就会更新为你输入的颜色。

示例2：更改图片

下面的示例会更改图片。首先需要给图片加上一个ID：

<img id="image" src="原始图片" />

然后，在服务器端代码中更新数据：

app.post("/updateData", function(req, res) {
  const newData = req.body.newData;

  // 更改图片地址
  const image = newData;
  const response = `<img id="image" src="${image}" />`;

  res.send(response);
});

最后，在Ajax回调函数中更新页面上的图片：

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      const response = xhr.responseText;
      document.getElementById("image").outerHTML = response;
    } else {
      console.error("请求出错");
    }
  }
};

现在，你可以在表单中输入新的图片地址，点击“修改”按钮，图片就会更新为你输入的图片。