jQuery实现AJAX异步请求实战教程包括get和post方法详解附带代码示例适合初学者快速掌握前端开发技能

嘿，朋友！我是Agnes。今天咱们不聊那些枯燥的理论，直接上手搞点真东西。你肯定听过”前端三剑客”——HTML、CSS、JavaScript，但你知道吗，在现代前端开发里，还有一个必须掌握的神器，那就是AJAX。而今天要讲的jQuery AJAX，就像是给AJAX穿上了一件超级舒服的西装，让原本有点别扭的异步请求变得优雅又简单。

先别急着往下滑，我知道你可能在想：”AJAX是什么？为什么要用jQuery？直接用原生JavaScript不行吗？” 好问题！让我像聊天一样，给你掰开揉碎讲讲。

为什么要学jQuery AJAX？它到底解决了什么痛点？

想象一下这个场景：你是个网站管理员，你的网站有个”最新新闻”板块。以前没有AJAX的时候，用户想看最新新闻，得刷新整个页面——标题、导航栏、侧边栏全都得重新加载，哪怕只是想知道今天出了几条新消息。这体验，糟糕透了，对吧？

AJAX的诞生，就是为了解决这个问题。它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。这就像是你跟朋友打电话，你可以一边聊一边继续做自己的事，而不是每次说完一句话就得挂断电话再重新拨号。

但等等，为什么说jQuery AJAX呢？因为原生的AJAX确实有点麻烦。你用原生JavaScript写AJAX，得处理XMLHttpRequest对象，得写一堆兼容性代码（哦对了，还得兼容IE6这种”古董”浏览器，虽然现在已经很少见了），代码写得又长又乱。而jQuery把这些繁琐的底层细节全部封装好了，你只需要调用一个简单的方法，就能搞定跨浏览器的异步请求。

打个比方：原生AJAX像是你自己从地里挖土豆、洗土豆、切土豆、炒土豆；而jQuery AJAX像是你打开冰箱，拿出一包已经切好洗好的土豆丝，直接下锅炒。效率高多了，不是吗？

不过，我也要诚实地告诉你：jQuery AJAX确实是过去十年前端开发的主流方案，但现在有很多新的选择，比如Fetch API和Axios。但在实际工作中，你依然会经常遇到维护旧项目或者需要使用jQuery的场景，而且学习jQuery AJAX对于理解AJAX的本质非常有帮助。所以，咱们今天这篇教程，既是对经典技术的致敬，也是为你打下坚实的前端基础。

环境准备：你只需要两个文件就能开始

在开始写代码之前，我得确保你有一个合适的环境。好消息是，你不需要安装任何复杂的工具，只需要一个文本编辑器（比如VS Code，我个人超级推荐）和一个浏览器（Chrome、Firefox都可以）。

首先，你需要引入jQuery库。最简单的方式是从CDN（内容分发网络）引入，这样你不需要下载任何文件。在你的HTML文件头部加上这一行：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

或者，如果你想离线使用，可以去jQuery官网下载最新版本，然后把文件放在你的项目目录里，用本地路径引入：

<script src="js/jquery-3.6.0.min.js"></script>

接下来，你得有一个简单的HTML结构。别担心，不用复杂，一个按钮和几个显示区域就够了：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery AJAX实战</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>jQuery AJAX入门实战</h1>
    
    <button id="btnGet">使用GET获取数据</button>
    <button id="btnPost">使用POST提交数据</button>
    
    <div id="result">结果将显示在这里</div>
    
    <script src="js/app.js"></script>
</body>
</html>

然后创建一个app.js文件，写我们的JavaScript代码。这样文件结构清晰，方便管理。

GET请求：从服务器”拿”数据，就像去超市购物

GET请求是AJAX中最常用的一种方法。它的本质是：你向服务器发送一个请求，告诉它”我要这个数据”，然后服务器把数据返回给你。GET请求通常用于获取数据，不会修改服务器上的任何内容。

最基础的GET请求：$.get()方法

jQuery提供了.get()方法，它是$.ajax()方法的一个简化版本。语法非常简单：

$.get(url, data, success, dataType);

url：请求的地址，必填
data：发送到服务器的数据，选填
success：请求成功后的回调函数，选填
dataType：期望从服务器返回的数据类型，选填

让我用一个具体的例子来演示。假设我有一个API接口，可以返回一些用户数据：https://jsonplaceholder.typicode.com/users。这是一个专门用于测试的假API，返回的数据是JSON格式的。

// app.js

$(document).ready(function() {
    // 页面加载完成后绑定事件
    
    // GET请求示例
    $('#btnGet').click(function() {
        $.get('https://jsonplaceholder.typicode.com/users', function(data) {
            // 这里的data就是服务器返回的数据
            $('#result').html('<h3>获取到的用户数据：</h3><ul>');
            
            // 遍历数据并显示
            $.each(data, function(index, user) {
                $('#result').append('<li>' + user.name + ' - ' + user.email + '</li>');
            });
            
            $('#result').append('</ul>');
        }, 'json'); // 指定返回的数据类型为JSON
    });
});

运行这段代码，当你点击”使用GET获取数据”按钮时，页面会异步向服务器发送请求，然后动态地把用户列表渲染到页面上。整个过程不需要刷新页面，体验非常流畅。

GET请求带参数：精准获取你想要的信息

有时候，你需要的不是全部数据，而是特定的数据。比如，你想获取ID为1的用户信息。这时候，你就可以在URL后面加参数，或者通过data参数传递：

// 方式一：直接在URL中加参数
$('#btnGet').click(function() {
    $.get('https://jsonplaceholder.typicode.com/users/1', function(data) {
        $('#result').html('<h3>用户信息：</h3>');
        $('#result').append('<p>姓名：' + data.name + '</p>');
        $('#result').append('<p>邮箱：' + data.email + '</p>');
        $('#result').append('<p>电话：' + data.phone + '</p>');
    }, 'json');
});

// 方式二：通过data参数传递（GET请求会把参数拼接到URL后面）
$('#btnGet').click(function() {
    $.get('https://jsonplaceholder.typicode.com/users', { id: 1 }, function(data) {
        // 处理数据
    }, 'json');
});

注意，GET请求的参数会被添加到URL后面，用问号?分隔，多个参数用&连接。这就是为什么GET请求不适合传递敏感数据（比如密码），因为参数会暴露在URL中。

使用$.ajax()进行更灵活的GET请求

虽然.get()方法很方便，但有时候你需要更多的控制，比如设置超时时间、添加请求头等。这时候，你就可以使用更底层的$.ajax()方法：

$.ajax({
    url: 'https://jsonplaceholder.typicode.com/users/1',
    type: 'GET', // 或者用method: 'GET'
    data: { format: 'json' }, // 发送到服务器的数据
    dataType: 'json', // 期望返回的数据类型
    timeout: 5000, // 超时时间5秒
    success: function(data) {
        $('#result').html('<h3>用户信息：</h3>');
        $('#result').append('<p>姓名：' + data.name + '</p>');
        $('#result').append('<p>邮箱：' + data.email + '</p>');
    },
    error: function(xhr, status, error) {
        // 请求失败时的处理
        $('#result').html('<p style="color:red;">请求失败：' + error + '</p>');
    },
    complete: function() {
        // 请求完成后的处理（无论成功还是失败都会执行）
        console.log('请求已完成');
    }
});

看到没？.ajax()方法让你可以设置超时时间、处理错误情况、添加请求完成后的逻辑。在实际项目中，这种灵活性非常有用。

POST请求：向服务器”提交”数据，就像填表格

如果说GET是”索取”，那么POST就是”给予”。POST请求通常用于向服务器提交数据，比如用户注册、发表评论、上传文件等。POST请求的数据不会显示在URL中，而是放在请求体中，所以更适合传递敏感或大量数据。

最基础的POST请求：$.post()方法

jQuery同样提供了.post()方法，语法和.get()几乎一样：

$.post(url, data, success, dataType);

让我用一个具体的例子。还是用那个假API，这次我们模拟提交一条新的评论：

// POST请求示例
$('#btnPost').click(function() {
    var newData = {
        title: 'jQuery AJAX实战教程',
        body: '这是一篇非常实用的教程...',
        userId: 1
    };
    
    $.post('https://jsonplaceholder.typicode.com/posts', newData, function(response) {
        $('#result').html('<h3>提交成功！</h3>');
        $('#result').append('<p>返回的数据：</p>');
        $('#result').append('<pre>' + JSON.stringify(response, null, 2) + '</pre>');
    }, 'json');
});

当你点击”使用POST提交数据”按钮时，浏览器会异步向服务器发送一条POST请求，服务器会返回一个新创建的文章对象。注意，这里我们用了JSON.stringify()来格式化输出，这样数据更易读。

POST请求带参数：传递复杂数据

和GET请求一样，POST请求也可以传递参数。区别在于，POST请求的参数会放在请求体中，而不是URL中：

// 使用表单数据提交
$('#btnPost').click(function() {
    var formData = {
        username: 'zhangsan',
        password: '123456',
        email: 'zhangsan@example.com'
    };
    
    $.post('https://httpbin.org/post', formData, function(response) {
        $('#result').html('<h3>提交结果：</h3>');
        $('#result').append('<pre>' + JSON.stringify(response, null, 2) + '</pre>');
    }, 'json');
});

使用$.ajax()进行更灵活的POST请求

同样，如果你需要更多的控制，可以使用$.ajax()方法：

$('#btnPost').click(function() {
    $.ajax({
        url: 'https://httpbin.org/post',
        type: 'POST',
        data: {
            username: 'zhangsan',
            password: '123456'
        },
        dataType: 'json',
        timeout: 10000,
        beforeSend: function(xhr) {
            // 请求发送前的处理
            $('#result').html('<p>正在提交数据...</p>');
            xhr.setRequestHeader('X-Custom-Header', 'my-value');
        },
        success: function(data) {
            $('#result').html('<h3>提交成功！</h3>');
            $('#result').append('<pre>' + JSON.stringify(data, null, 2) + '</pre>');
        },
        error: function(xhr, status, error) {
            $('#result').html('<p style="color:red;">提交失败：' + error + '</p>');
        },
        complete: function() {
            // 隐藏加载状态
            console.log('请求完成');
        }
    });
});

看，beforeSend回调让你在请求发送前可以做很多事，比如显示加载动画、设置自定义请求头等。这些细节在实际项目中非常实用。

实际项目中的完整案例：用户注册表单

光说不练假把式。让我给你一个完整的实际案例：一个简单的用户注册页面。这个案例会用到GET和POST两种请求，涵盖了很多实际开发中的场景。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户注册实战</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        #message {
            margin-top: 20px;
            padding: 10px;
            border-radius: 4px;
        }
        .success {
            background-color: #dff0d8;
            color: #3c763d;
        }
        .error {
            background-color: #f2dede;
            color: #a94442;
        }
        .loading {
            color: #888;
        }
    </style>
</head>
<body>
    <h1>用户注册</h1>
    
    <form id="registerForm">
        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" required>
        </div>
        
        <div class="form-group">
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email" required>
        </div>
        
        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" required>
        </div>
        
        <button type="submit">注册</button>
    </form>
    
    <div id="message"></div>
    
    <script>
        $(document).ready(function() {
            // 页面加载时，先检查用户名是否已被占用（GET请求）
            $('#username').blur(function() {
                var username = $(this).val();
                if (username.length > 0) {
                    $('#message').html('<p class="loading">正在检查用户名...</p>');
                    
                    $.get('https://jsonplaceholder.typicode.com/users', function(data) {
                        var existingUsers = data.map(function(user) {
                            return user.username;
                        });
                        
                        if (existingUsers.includes(username)) {
                            $('#message').html('<p class="error">用户名已被占用</p>');
                        } else {
                            $('#message').html('<p class="success">用户名可用</p>');
                        }
                    }, 'json');
                }
            });
            
            // 表单提交（POST请求）
            $('#registerForm').on('submit', function(e) {
                e.preventDefault(); // 阻止表单默认提交行为
                
                var formData = {
                    username: $('#username').val(),
                    email: $('#email').val(),
                    password: $('#password').val()
                };
                
                $('#message').html('<p class="loading">正在注册...</p>');
                
                $.ajax({
                    url: 'https://jsonplaceholder.typicode.com/users',
                    type: 'POST',
                    data: formData,
                    dataType: 'json',
                    success: function(response) {
                        $('#message').html('<p class="success">注册成功！欢迎，' + response.username + '</p>');
                        // 清空表单
                        $('#registerForm')[0].reset();
                    },
                    error: function(xhr, status, error) {
                        $('#message').html('<p class="error">注册失败：' + error + '</p>');
                    }
                });
            });
        });
    </script>
</body>
</html>

这个案例展示了几个关键点：

GET请求用于数据查询：当用户输入用户名并失去焦点时，我们异步查询该用户名是否已被占用。这是一个典型的GET请求应用场景。
POST请求用于数据提交：用户点击注册按钮后，我们向服务器提交注册信息。这是一个典型的POST请求应用场景。
用户体验优化：通过显示”正在检查”、”正在注册”等提示，让用户知道程序正在工作，不会觉得卡住了。
错误处理：无论请求成功还是失败，都有相应的提示信息，而不是让错误悄悄发生。

常见坑点和注意事项：避开这些，少走弯路

作为过来人，我得告诉你几个新手最容易踩的坑：

1. 跨域问题（CORS）

这是最常见的坑之一。浏览器有同源策略，不允许从一个源（域名、协议、端口）请求另一个源的资源。如果你在本地开发（file://），去请求远程服务器（https://），就会遇到跨域问题。

解决方案有多种：

后端配置CORS头
使用JSONP（仅GET请求）
使用代理服务器
开发时使用Chrome的–allow-file-access-from-files参数（不推荐生产环境使用）

2. 数据类型不匹配

如果你期望返回JSON数据，但服务器返回的是HTML或文本，jQuery会尝试解析，但可能会出错。务必在dataType参数中明确指定

正文

jQuery实现AJAX异步请求实战教程包括get和post方法详解附带代码示例适合初学者快速掌握前端开发技能

为什么要学jQuery AJAX？它到底解决了什么痛点？

环境准备：你只需要两个文件就能开始

GET请求：从服务器”拿”数据，就像去超市购物

最基础的GET请求：$.get()方法

GET请求带参数：精准获取你想要的信息

使用$.ajax()进行更灵活的GET请求

POST请求：向服务器”提交”数据，就像填表格

最基础的POST请求：$.post()方法

POST请求带参数：传递复杂数据

使用$.ajax()进行更灵活的POST请求

实际项目中的完整案例：用户注册表单

常见坑点和注意事项：避开这些，少走弯路

1. 跨域问题（CORS）

2. 数据类型不匹配

相关阅读

如何用jQuery轻松实现AJAX异步请求，快速获取数据不刷新页面

用jQuery发ajax请求别再只会$.ajax了看看success报错回调error和complete的坑新手踩坑实例详解

新手必看：jsp与ajax完美结合，轻松实现网页异步请求大揭秘

如何用JSP和Ajax轻松实现页面不刷新的异步数据请求？

如何用JSP和Ajax轻松实现网页异步加载与交互效果

轻松学会jQuery AJAX异步请求，快速构建动态网页交互效果

掌握JSP与Ajax技术，轻松实现网站异步交互与动态更新

学会jQuery轻松搞定AJAX异步请求，实操案例解析，小白也能轻松上手

掌握JSP与Ajax技术，轻松实现网站异步交互与数据更新

揭秘：轻松掌握jQuery AJAX，轻松实现网页数据无刷新更新

为什么要学jQuery AJAX？它到底解决了什么痛点？

环境准备：你只需要两个文件就能开始

GET请求：从服务器”拿”数据，就像去超市购物

最基础的GET请求：$.get()方法

GET请求带参数：精准获取你想要的信息

使用$.ajax()进行更灵活的GET请求

POST请求：向服务器”提交”数据，就像填表格

最基础的POST请求：$.post()方法

POST请求带参数：传递复杂数据

使用$.ajax()进行更灵活的POST请求

实际项目中的完整案例：用户注册表单

常见坑点和注意事项：避开这些，少走弯路

1. 跨域问题（CORS）

2. 数据类型不匹配

相关阅读

如何用jQuery轻松实现AJAX异步请求，快速获取数据不刷新页面

用jQuery发ajax请求别再只会$.ajax了 看看success报错回调error和complete的坑 新手踩坑实例详解

新手必看：jsp与ajax完美结合，轻松实现网页异步请求大揭秘

如何用JSP和Ajax轻松实现页面不刷新的异步数据请求？

如何用JSP和Ajax轻松实现网页异步加载与交互效果

轻松学会jQuery AJAX异步请求，快速构建动态网页交互效果

掌握JSP与Ajax技术，轻松实现网站异步交互与动态更新

学会jQuery轻松搞定AJAX异步请求，实操案例解析，小白也能轻松上手

掌握JSP与Ajax技术，轻松实现网站异步交互与数据更新

揭秘：轻松掌握jQuery AJAX，轻松实现网页数据无刷新更新

用jQuery发ajax请求别再只会$.ajax了看看success报错回调error和complete的坑新手踩坑实例详解