编程马·菜鸟教程

Appearance

第9章：jQuery AJAX 异步请求（前后端交互核心） ​

9.1 AJAX 是什么？（异步请求，无需刷新页面获取数据） ​

AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。它允许网页在后台与服务器进行数据交换，使页面能够动态更新，提升用户体验。

AJAX的核心优势： ​

  • 异步请求：不阻塞页面其他操作
  • 局部更新：只更新页面的部分内容，不需要刷新整个页面
  • 减少带宽：只传输必要的数据，减少网络流量
  • 提升用户体验：页面响应更快，操作更流畅

9.2 jQuery AJAX 核心方法（重点掌握） ​

$.ajax()：通用AJAX方法（灵活，支持所有请求类型） ​

  • 作用：发送AJAX请求，支持所有HTTP请求方法

  • 语法：

    javascript
    $.ajax({
    url: '请求地址',
    type: '请求方法', // GET、POST、PUT、DELETE等
    data: '请求数据',
    dataType: '数据类型', // json、xml、html、text等
    success: function(response) {
        // 请求成功回调
    },
    error: function(xhr, status, error) {
        // 请求失败回调
    }
});

  • 示例：

    javascript
    $.ajax({
    url: 'https://api.example.com/users',
    type: 'GET',
    dataType: 'json',
    success: function(response) {
        console.log('请求成功：', response);
    },
    error: function(xhr, status, error) {
        console.error('请求失败：', error);
    }
});

$.get()：GET请求（获取数据，简单易用） ​

  • 作用：发送GET请求，获取数据

  • 语法：$.get(url, data, success, dataType)

  • 参数：

    • url：请求地址
    • data：请求数据
    • success：成功回调函数
    • dataType：预期的数据类型

  • 示例：

    javascript
    $.get('https://api.example.com/users', function(response) {
    console.log('获取用户数据：', response);
}, 'json');

$.post()：POST请求（提交数据，常用） ​

  • 作用：发送POST请求，提交数据

  • 语法：$.post(url, data, success, dataType)

  • 参数：

    • url：请求地址
    • data：提交的数据
    • success：成功回调函数
    • dataType：预期的数据类型

  • 示例：

    javascript
    $.post('https://api.example.com/users', {
    name: 'John',
    email: 'john@example.com'
}, function(response) {
    console.log('创建用户成功：', response);
}, 'json');

$.getJSON()：获取JSON格式数据（简化JSON请求） ​

  • 作用：发送GET请求，获取JSON格式数据

  • 语法：$.getJSON(url, data, success)

  • 参数：

    • url：请求地址
    • data：请求数据
    • success：成功回调函数

  • 示例：

    javascript
    $.getJSON('https://api.example.com/users', function(response) {
    console.log('获取JSON数据：', response);
});

9.3 AJAX 请求参数解析（url、type、data、success、error等） ​

常用参数： ​

  • url：请求的URL地址
  • type：请求方法，默认为'GET'
  • data：发送到服务器的数据，可以是对象或字符串
  • dataType：预期服务器返回的数据类型，如'json'、'xml'、'html'、'text'
  • success：请求成功时的回调函数
  • error：请求失败时的回调函数
  • beforeSend：发送请求前的回调函数
  • complete：请求完成（无论成功或失败）时的回调函数
  • timeout：请求超时时间，单位为毫秒
  • headers：设置请求头

示例：带更多参数的AJAX请求 ​

javascript
$.ajax({
    url: 'https://api.example.com/users',
    type: 'POST',
    data: {
        name: 'John',
        email: 'john@example.com'
    },
    dataType: 'json',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer token123'
    },
    timeout: 5000,
    beforeSend: function() {
        console.log('请求即将发送');
        // 显示加载指示器
        $('#loading').show();
    },
    success: function(response) {
        console.log('请求成功：', response);
        // 处理响应数据
    },
    error: function(xhr, status, error) {
        console.error('请求失败：', error);
        // 显示错误信息
    },
    complete: function() {
        console.log('请求完成');
        // 隐藏加载指示器
        $('#loading').hide();
    }
});

9.4 响应数据处理（success回调函数，解析返回数据） ​

处理JSON数据： ​

javascript
$.getJSON('https://api.example.com/users', function(response) {
    // 遍历用户数据
    $.each(response, function(index, user) {
        console.log('用户ID：', user.id);
        console.log('用户名：', user.name);
        console.log('邮箱：', user.email);
    });
    
    // 将数据显示到页面
    let html = '';
    $.each(response, function(index, user) {
        html += '<div class="user">' +
            '<h3>' + user.name + '</h3>' +
            '<p>邮箱：' + user.email + '</p>' +
        '</div>';
    });
    $('#userList').html(html);
});

处理HTML数据： ​

javascript
$.get('https://api.example.com/users/list', function(response) {
    // 直接将HTML插入到页面
    $('#userList').html(response);
}, 'html');

处理XML数据： ​

javascript
$.ajax({
    url: 'https://api.example.com/users',
    dataType: 'xml',
    success: function(xml) {
        // 解析XML数据
        $(xml).find('user').each(function() {
            const id = $(this).find('id').text();
            const name = $(this).find('name').text();
            const email = $(this).find('email').text();
            console.log('用户：', id, name, email);
        });
    }
});

9.5 错误处理（error回调函数，排查请求失败原因） ​

错误类型： ​

  • 网络错误：无法连接到服务器
  • 服务器错误：服务器返回500错误
  • 客户端错误：请求参数错误，服务器返回400错误
  • 超时错误：请求超时

错误处理示例： ​

javascript
$.ajax({
    url: 'https://api.example.com/users',
    type: 'GET',
    success: function(response) {
        console.log('请求成功：', response);
    },
    error: function(xhr, status, error) {
        console.error('请求失败：', error);
        console.error('状态码：', xhr.status);
        console.error('状态文本：', xhr.statusText);
        
        // 根据错误类型显示不同的错误信息
        if (xhr.status === 404) {
            alert('请求的资源不存在');
        } else if (xhr.status === 500) {
            alert('服务器内部错误');
        } else if (status === 'timeout') {
            alert('请求超时');
        } else {
            alert('请求失败，请稍后重试');
        }
    }
});

9.6 实操案例：发送GET/POST请求，获取并展示后台数据 ​

案例：AJAX数据请求练习 ​

HTML结构： ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery AJAX练习</title>
    <style>
        .container { 
            width: 600px; 
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ccc;
        }
        .user { 
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            background-color: #f9f9f9;
        }
        .loading { 
            display: none;
            padding: 10px;
            background-color: #f0f0f0;
            text-align: center;
            margin: 10px 0;
        }
        form { 
            margin: 20px 0;
        }
        input { 
            padding: 5px;
            margin: 5px 0;
            width: 100%;
        }
        button { 
            padding: 5px 10px;
            margin: 5px;
            cursor: pointer;
        }
        .error { 
            color: red;
            margin: 10px 0;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>AJAX数据请求练习</h2>
        
        <!-- 加载指示器 -->
        <div class="loading" id="loading">加载中...</div>
        
        <!-- 错误信息 -->
        <div class="error" id="error"></div>
        
        <!-- 获取用户列表 -->
        <div>
            <h3>用户列表</h3>
            <button id="getUsersBtn">获取用户列表</button>
            <div id="userList"></div>
        </div>
        
        <!-- 创建用户 -->
        <div>
            <h3>创建用户</h3>
            <form id="createUserForm">
                <input type="text" id="name" placeholder="用户名" required>
                <input type="email" id="email" placeholder="邮箱" required>
                <button type="submit">创建用户</button>
            </form>
            <div id="createResult"></div>
        </div>
    </div>
    
    <script>
        $(document).ready(function() {
            // 获取用户列表
            $('#getUsersBtn').click(function() {
                // 显示加载指示器
                $('#loading').show();
                $('#error').empty();
                
                // 发送GET请求
                $.get('https://jsonplaceholder.typicode.com/users', function(response) {
                    // 隐藏加载指示器
                    $('#loading').hide();
                    
                    // 显示用户列表
                    let html = '';
                    $.each(response, function(index, user) {
                        html += '<div class="user">' +
                            '<h4>' + user.name + '</h4>' +
                            '<p>邮箱：' + user.email + '</p>' +
                            '<p>电话：' + user.phone + '</p>' +
                            '<p>网站：' + user.website + '</p>' +
                        '</div>';
                    });
                    $('#userList').html(html);
                }).fail(function(xhr, status, error) {
                    // 隐藏加载指示器
                    $('#loading').hide();
                    // 显示错误信息
                    $('#error').text('获取用户列表失败：' + error);
                });
            });
            
            // 创建用户
            $('#createUserForm').submit(function(event) {
                event.preventDefault();
                
                const name = $('#name').val();
                const email = $('#email').val();
                
                // 显示加载指示器
                $('#loading').show();
                $('#error').empty();
                $('#createResult').empty();
                
                // 发送POST请求
                $.post('https://jsonplaceholder.typicode.com/users', {
                    name: name,
                    email: email
                }, function(response) {
                    // 隐藏加载指示器
                    $('#loading').hide();
                    
                    // 显示创建结果
                    $('#createResult').html('<div class="user">' +
                        '<h4>创建成功！</h4>' +
                        '<p>用户ID：' + response.id + '</p>' +
                        '<p>用户名：' + response.name + '</p>' +
                        '<p>邮箱：' + response.email + '</p>' +
                    '</div>');
                    
                    // 清空表单
                    $('#name').val('');
                    $('#email').val('');
                }).fail(function(xhr, status, error) {
                    // 隐藏加载指示器
                    $('#loading').hide();
                    // 显示错误信息
                    $('#error').text('创建用户失败：' + error);
                });
            });
        });
    </script>
</body>
</html>

测试步骤： ​

  1. 保存文件为ajax-practice.html
  2. 用浏览器打开该文件
  3. 点击"获取用户列表"按钮，观察用户列表的加载和显示
  4. 在表单中填写用户名和邮箱，点击"创建用户"按钮，观察创建结果
  5. 尝试断网或修改URL，观察错误处理

案例解析： ​

  • GET请求：使用$.get()方法获取用户列表数据
  • POST请求：使用$.post()方法提交用户数据
  • 加载状态：使用beforeSend和complete回调函数显示和隐藏加载指示器
  • 错误处理：使用.fail()方法处理请求失败的情况
  • 数据展示：将获取的数据动态显示到页面

新手易错点： ​

  1. 跨域问题：

    • 浏览器的同源策略会阻止跨域请求
    • 解决方案：使用CORS、JSONP或代理服务器
    • 本案例使用了jsonplaceholder.typicode.com，它支持CORS

  2. 请求参数格式：

    • GET请求的参数会自动拼接到URL后面
    • POST请求的参数需要注意Content-Type

  3. 回调函数作用域：

    • 回调函数中的this指向可能与预期不同
    • 建议使用箭头函数或保存this的引用

  4. 异步特性：

    • AJAX是异步的，代码执行顺序可能与预期不同
    • 所有依赖响应数据的操作都应该在回调函数中执行

  5. 错误处理：

    • 不要忽略错误处理，应该对可能的错误情况进行处理
    • 可以使用.fail()方法或error回调函数

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建