jquery ajax 修改-前端问答-PHP中文网

jQuery 是一款流行的 JavaScript 库，它为开发者提供一系列简洁易用的方法，可以轻松实现诸如 DOM 操作、事件处理、动画效果等功能。其中，jQuery AJAX 是其最为重要的特性之一，本文将详细介绍 jQuery AJAX 的使用方法以及如何在 AJAX 中实现修改操作。

一、jQuery AJAX 的使用方法

jQuery AJAX 可以使用 $.ajax() 方法来发起异步请求。其基本语法如下：

$.ajax({
  url: 请求 URL,
  type: 请求方式，
  data: 发送的数据，
  dataType: 接收数据的类型，
  success: 请求成功时执行的函数，
  error: 请求失败时执行的函数
});

登录后复制

参数说明：

url：表示请求的 URL；
type：表示请求的方式，可以是 "GET"、"POST" 等；
data：表示发送的数据，可以是字符串、对象或数组；
dataType：表示接收数据的类型，可以是 "text"、"html"、"JSON" 等；
success：表示请求成功后执行的函数，函数中的参数为返回的数据；
error：表示请求失败时执行的函数，函数中的参数为错误信息。

例如，以下代码发起了一个 GET 请求：

$.ajax({
  url: "example.com/api/data",
  type: "GET",
  dataType: "JSON",
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, errorThrown) {
    console.log("Error: " + errorThrown);
  }
});

登录后复制

二、jQuery AJAX 实现修改操作

在 AJAX 中实现修改操作需要注意以下几点：

请求方式应该为 "PUT" 或 "POST"；
发送的数据格式应该为 JSON 格式，即需使用 JSON.stringify() 方法将数据转换为字符串；
修改成功后，应该重新加载页面或修改部分页面内容，以便用户能够看到修改后的结果。

下面，我们将分步骤演示如何在 AJAX 中实现修改操作。

步骤一：创建 HTML 页面

首先，我们需要创建一个 HTML 页面，用于展示修改前和修改后的数据。在页面中，我们可以通过表格来呈现数据，如下所示：

<p>修改前数据：</p>
<table id="before">
  <thead>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>女</td>
    </tr>
  </tbody>
</table>
 
<p>修改后数据：</p>
<table id="after">
  <thead>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </thead>
  <tbody></tbody>
</table>

登录后复制

步骤二：编写 jQuery AJAX 请求

接下来，我们需要使用 jQuery AJAX 发起异步请求。在此过程中，我们需要对请求进行一些配置，同时需要编写相应的回调函数。

在本例中，我们使用 "PUT" 请求方式来修改数据，数据为 JSON 格式。当请求成功时，我们需要获取服务器返回的修改后的数据，并更新 HTML 页面。当请求失败时，我们需要给出相应的错误提示。

具体代码如下：

// 创建数据对象
var data = {
  name: "张三",
  age: 25,
  sex: "男"
};
 
// 发起请求
$.ajax({
  url: "example.com/api/user",
  type: "PUT",
  data: JSON.stringify(data),
  dataType: "JSON",
  success: function(res) {
    // 更新 HTML 页面
    var html = '';
    $.each(res, function(key, value) {
      html += '<tr>';
      html += '<td>' + value.name + '</td>';
      html += '<td>' + value.age + '</td>';
      html += '<td>' + value.sex + '</td>';
      html += '</tr>';
    });
    $('#after tbody').html(html);
  },
  error: function(xhr, status, errorThrown) {
    // 提示错误信息
    alert("修改失败：" + errorThrown);
  }
});

登录后复制

步骤三：启动服务器并测试

最后，在 AJAX 请求的过程中，我们需要启动一个模拟服务器来模拟实际的 AJAX 请求。具体实现可以参考 Node.js、Express、MongoDB 等技术。这里我们以 Node.js 为例进行说明。

首先，我们需要安装并初始化 npm：

1	`npm init`

登录后复制

然后，安装 Express 和 body-parser：

1	`npm install express body-parser --save`

登录后复制

最后，编写服务器代码：

var express = require('express');
var bodyParser = require('body-parser');
 
var app = express();
 
app.use(bodyParser.json({ limit: '10mb' }));
app.use(bodyParser.urlencoded({ extended: true, limit: '10mb' }));
 
// 跨域处理
app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
  if (req.method == 'OPTIONS') {
    res.send(200);
  } else {
    next();
  }
});
 
// 处理 PUT 请求
app.put('/api/user', function(req, res) {
  var data = req.body;
  console.log('修改前数据：', data);
  data.age = 26;
  console.log('修改后数据：', data);
  res.json([data]);
});
 
// 启动服务器
var server = app.listen(3000, function () {
  console.log('Server running at http://localhost:3000');
});