如何用AJAX轻松发送不同类型HTTP请求：GET、POST、PUT、DELETE详解及实战案例

方法 2026-08-19 0°

在Web开发中，AJAX（Asynchronous JavaScript and XML）技术允许我们在不重新加载页面的情况下与服务器交换数据和更新部分网页。AJAX可以通过发送不同类型的HTTP请求来实现这一功能。以下是GET、POST、PUT和DELETE请求的详解及实战案例。

GET请求

GET请求通常用于从服务器检索数据。它是幂等的，意味着多次执行相同的GET请求不会产生副作用。

详解

用途：获取数据，如从服务器获取用户列表。
安全性：相对安全，因为数据在URL中传输。
数据类型：查询参数，通过URL传递。

实战案例

// 使用jQuery发送GET请求
$.ajax({
    url: 'https://api.example.com/data',
    type: 'GET',
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, status, error) {
        console.error('Error:', error);
    }
});

POST请求

POST请求用于向服务器发送数据，通常用于创建或更新资源。

详解

用途：创建或更新数据，如提交表单。
安全性：比GET请求更安全，因为数据不会在URL中暴露。
数据类型：表单数据或JSON，通过请求体传递。

实战案例

// 使用jQuery发送POST请求
$.ajax({
    url: 'https://api.example.com/data',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({name: 'John', age: 30}),
    success: function(response) {
        console.log('Data sent:', response);
    },
    error: function(xhr, status, error) {
        console.error('Error:', error);
    }
});

PUT请求

PUT请求用于更新服务器上的资源。

详解

用途：更新数据，如更新用户信息。
幂等性：幂等的，多次执行相同的PUT请求将产生相同的结果。
数据类型：请求体中的数据，通常是JSON格式。

实战案例

// 使用jQuery发送PUT请求
$.ajax({
    url: 'https://api.example.com/data/123',
    type: 'PUT',
    contentType: 'application/json',
    data: JSON.stringify({name: 'John', age: 35}),
    success: function(response) {
        console.log('Data updated:', response);
    },
    error: function(xhr, status, error) {
        console.error('Error:', error);
    }
});

DELETE请求

DELETE请求用于从服务器删除资源。

详解

用途：删除数据，如删除一个用户账户。
幂等性：幂等的，多次执行相同的DELETE请求将产生相同的结果。
安全性：通常需要身份验证。

实战案例

// 使用jQuery发送DELETE请求
$.ajax({
    url: 'https://api.example.com/data/123',
    type: 'DELETE',
    success: function(response) {
        console.log('Data deleted:', response);
    },
    error: function(xhr, status, error) {
        console.error('Error:', error);
    }
});

通过以上实战案例，你可以看到如何使用AJAX发送不同类型的HTTP请求。在实际应用中，你可能需要根据具体情况调整请求的参数和数据处理方式。记住，正确使用AJAX请求可以大大提高Web应用程序的性能和用户体验。