Home > Article > Web Front-end > 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:
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 :
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!