jquery ajax modification

jQuery is a popular JavaScript library that provides developers with a series of concise and easy-to-use methods to easily implement functions such as DOM operations, event handling, animation effects, etc. Among them, jQuery AJAX is one of its most important features. This article will introduce in detail how to use jQuery AJAX and how to implement modification operations in AJAX.

1. How to use jQuery AJAX

jQuery AJAX can use the $.ajax() method to initiate asynchronous requests. The basic syntax is as follows:

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

Parameter description:

• url: Indicates the requested URL;
• type: Indicates the request method, which can be "GET", "POST" etc.;
• data: indicates the data sent, which can be a string, object or array;
• dataType: indicates the type of received data, which can be "text", "html" , "JSON", etc.;
• success: indicates the function executed after the request is successful, and the parameters in the function are the returned data;
• error: indicates the function executed when the request fails, and the parameters in the function The parameters are error messages.

For example, the following code initiates a GET request:

$.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);
  }
});

2. jQuery AJAX implements modification operations

When implementing modification operations in AJAX, you need to pay attention to the following points :

1. The request method should be "PUT" or "POST";
2. The data format sent should be JSON format, that is, the JSON.stringify() method needs to be used to convert the data into String;
3. After the modification is successful, the page should be reloaded or part of the page content should be modified so that the user can see the modified results.

Below, we will demonstrate step by step how to implement modification operations in AJAX.

Step 1: Create HTML page

First, we need to create an HTML page to display the data before and after modification. In the page, we can present data through tables, as shown below:

<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>

Step 2: Write jQuery AJAX request

Next, we need to use jQuery AJAX to initiate an asynchronous request. During this process, we need to configure some requests and write corresponding callback functions.

In this example, we use the "PUT" request method to modify the data, and the data is in JSON format. When the request is successful, we need to get the modified data returned by the server and update the HTML page. When a request fails, we need to give a corresponding error message.

The specific code is as follows:

// 创建数据对象
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);
  }
});

Step 3: Start the server and test

Finally, during the AJAX request process, we need to start a simulation server to simulate the actual AJAX ask. For specific implementation, please refer to Node.js, Express, MongoDB and other technologies. Here we take Node.js as an example to illustrate.

First, we need to install and initialize npm:

npm init

Then, install Express and body-parser:

npm install express body-parser --save

Finally, write the server code:

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');
});

After the modification is completed, start the server and access the HTML page in the browser to test. During the test, we can modify the age attribute value in the data object to any number, and then click the button. The server will return the modified data, and the corresponding modification results will also be displayed on the HTML page.

Summary

This article introduces the use of jQuery AJAX and how to implement modification operations in AJAX. In practical applications, AJAX technology can greatly improve the interactivity and user experience of the website. I hope this article can shed some light on the practice and application of AJAX, and also help readers better master the basic knowledge and usage of jQuery.

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