jQuery AJAX 异步请求

掌握$.ajax及快捷方法发送HTTP请求、处理响应 · 难度：进阶 · +15XP

jQuery AJAX

AJAX让页面无需刷新即可与服务器通信。jQuery简化了这个过程。

$.ajax() 核心方法

$.ajax({
    url: '/api/users',
    method: 'GET',
    data: { page: 1, limit: 10 },
    dataType: 'json',
    success: function(response) {
        console.log('成功:', response);
    },
    error: function(xhr, status, error) {
        console.error('失败:', error);
    }
});

快捷方法

$.get('/api/users', {page:1}, function(data) {
    console.log(data);
});

$.post('/api/users', {name:'张三', age:25}, function(data) {
    console.log('创建成功', data);
});

$.getJSON('/api/users.json', function(data) {
    console.log(data);
});

加载HTML片段

$('#container').load('/partials/header.html');

Promise风格

$.ajax({url:'/api/data'})
    .done(function(data) { console.log(data); })
    .fail(function(err) { console.error(err); })
    .always(function() { console.log('完成'); });

💡 练习

用$.get请求数据并在页面上渲染列表。