ajax正删改查-ajax增删改查json数据：示例代码

温馨提示：这篇文章已超过243天没有更新，请注意相关的内容是否还可用！

AJAX（Asynchronous JavaScript and XML）是一种用于在不刷新整个页面的情况下，通过后台服务器与前端页面进行数据交互的技术。它可以实现对数据的增删改查操作，而不需要重新加载整个页面。

我们来看一下如何通过AJAX实现数据的增加操作。在前端页面中，我们可以通过监听某个按钮的点击事件，然后通过AJAX发送一个POST请求到后台服务器，将新增的数据传递给后台。后台服务器接收到请求后，可以将数据存储到数据库中，然后返回一个成功或失败的响应给前端页面。

示例代码如下：


// 监听按钮的点击事件
document.getElementById("addButton").addEventListener("click", function() {
  // 创建一个XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  // 设置请求的方法、URL和是否异步
  xhr.open("POST", "/api/add", true);
  // 设置请求头
  xhr.setRequestHeader("Content-Type", "application/json");
  // 监听请求的状态变化
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      // 请求成功，执行相应的操作
      console.log(xhr.responseText);
    }
  };
  // 构造要发送的数据
  var data = {
    name: "John",
    age: 25,
    email: "john@example.com"
  };
  // 发送请求
  xhr.send(JSON.stringify(data));
});

接下来，我们来看一下如何通过AJAX实现数据的删除操作。在前端页面中，我们可以通过监听某个按钮的点击事件，然后通过AJAX发送一个DELETE请求到后台服务器，将要删除的数据的唯一标识传递给后台。后台服务器接收到请求后，可以根据唯一标识从数据库中删除相应的数据，并返回一个成功或失败的响应给前端页面。

示例代码如下：


// 监听按钮的点击事件
document.getElementById("deleteButton").addEventListener("click", function() {
  // 创建一个XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  // 设置请求的方法、URL和是否异步
  xhr.open("DELETE", "/api/delete?id=123", true);
  // 监听请求的状态变化
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      // 请求成功，执行相应的操作
      console.log(xhr.responseText);
    }
  };
  // 发送请求
  xhr.send();
});

然后，我们来看一下如何通过AJAX实现数据的修改操作。在前端页面中，我们可以通过监听某个按钮的点击事件，然后通过AJAX发送一个PUT请求到后台服务器，将要修改的数据的唯一标识和修改后的数据传递给后台。后台服务器接收到请求后，可以根据唯一标识找到相应的数据，并更新数据库中的数据，并返回一个成功或失败的响应给前端页面。

示例代码如下：


// 监听按钮的点击事件
document.getElementById("updateButton").addEventListener("click", function() {
  // 创建一个XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  // 设置请求的方法、URL和是否异步
  xhr.open("PUT", "/api/update?id=123", true);
  // 设置请求头
  xhr.setRequestHeader("Content-Type", "application/json");
  // 监听请求的状态变化
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      // 请求成功，执行相应的操作
      console.log(xhr.responseText);
    }
  };
  // 构造要发送的数据
  var data = {
    name: "John Doe",
    age: 30,
    email: "johndoe@example.com"
  };
  // 发送请求
  xhr.send(JSON.stringify(data));
});

我们来看一下如何通过AJAX实现数据的查询操作。在前端页面中，我们可以通过AJAX发送一个GET请求到后台服务器，后台服务器可以根据请求的参数来查询数据库中的数据，并将查询结果返回给前端页面。

示例代码如下：


// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求的方法、URL和是否异步
xhr.open("GET", "/api/query?id=123", true);
// 监听请求的状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    // 请求成功，执行相应的操作
    console.log(xhr.responseText);
  }
};
// 发送请求
xhr.send();