前端开发|异步请求—ajax与jquery的结合使用方法详解

前端开发 | 异步请求——ajax与jQuery的结合使用方法详解

场景引入：购物车的小烦恼

"这页面怎么又卡住了！"小王盯着电脑屏幕，烦躁地刷新着网页，他正在电商网站选购年货，每次点击"加入购物车"都要等待整个页面重新加载，体验糟糕透了。

作为前端开发者的你肯定遇到过类似需求——如何在不刷新页面的情况下完成数据交互？这就是我们今天要聊的ajax与jQuery的黄金组合，它能完美解决这类问题。

ajax基础认知

ajax（Asynchronous JavaScript and XML）就是让浏览器悄悄在后台和服务器"说悄悄话"的技术，它最大的特点就是异步——不用傻等服务器回应，用户可以继续操作页面。

原生ajax写法是这样的：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'api/data', true);
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

是不是看着就头大？别担心，jQuery来拯救我们了。

jQuery中的ajax简化写法

jQuery把上面这一大段代码浓缩成了几行：

$.ajax({
  url: 'api/data',
  type: 'GET',
  success: function(data) {
    console.log('拿到数据啦:', data);
  },
  error: function(err) {
    console.log('出错了:', err);
  }
});

清爽多了吧？让我们拆解这个"魔法"：

1. $.ajax() 是jQuery提供的核心方法
2. url 指定要请求的地址
3. type 设置请求方式（GET/POST等）
4. success 请求成功时的回调函数
5. error 请求失败时的处理函数

常用快捷方法

jQuery还贴心地为我们准备了更简洁的写法：

GET请求

$.get('api/products', function(data) {
  $('#product-list').html(data);
});

POST请求

$.post('api/cart/add', { productId: 123 }, function(res) {
  alert('添加成功！当前数量：' + res.quantity);
});

加载HTML片段

$('#user-profile').load('partials/profile.html #basic-info');

实战案例：购物车功能

让我们用刚学的知识实现一个无刷新购物车：

// 加入购物车
$('.add-to-cart').click(function() {
  var productId = $(this).data('id');
  $.post('/cart/add', { id: productId })
    .done(function(res) {
      $('#cart-count').text(res.totalItems);
      showToast('商品已加入购物车');
    })
    .fail(function() {
      showToast('操作失败，请重试');
    });
});
// 获取购物车数据
function updateCart() {
  $.getJSON('/cart/data')
    .done(function(data) {
      renderCartItems(data.items);
      $('#cart-total').text(data.totalPrice);
    });
}
// 页面加载时获取初始数据
$(document).ready(function() {
  updateCart();
});

进阶技巧

设置全局默认参数

$.ajaxSetup({
  timeout: 5000,
  headers: { 'X-Requested-With': 'XMLHttpRequest' }
});

处理JSON数据

$.getJSON('api/users', function(users) {
  var list = $('#user-list');
  $.each(users, function(i, user) {
    list.append(`<li>${user.name} - ${user.email}</li>`);
  });
});

表单提交拦截

$('#login-form').submit(function(e) {
  e.preventDefault();
  var formData = $(this).serialize();
  $.post('/login', formData)
    .done(function() {
      window.location.href = '/dashboard';
    })
    .fail(function() {
      $('#error-message').show();
    });
});

常见问题排雷

1. 跨域问题：浏览器安全限制导致的不同域名请求失败

   解决方案：后端设置CORS或使用JSONP（仅限GET）

   

2. 请求顺序无法保证：后发请求可能先返回

   // 错误示例
   $.get('api/first', function() { /*...*/ });
   $.get('api/second', function() { /*...*/ });
   // 正确做法：使用回调或Promise链
   $.get('api/first').then(function() {
     return $.get('api/second');
   }).then(function() {
     // 顺序执行完成
   });

3. 请求堆积：快速连续点击导致重复请求

   var isRequesting = false;
   $('.submit-btn').click(function() {
     if(isRequesting) return;
     isRequesting = true;
     $.post('api/submit', data)
       .always(function() {
         isRequesting = false;
       });
   });

2025年的新变化

虽然现在（2025年）Fetch API和axios等新技术越来越流行，但jQuery的ajax仍然有其优势：

1. 完美兼容老旧浏览器
2. 与jQuery DOM操作无缝衔接
3. 简洁易懂的语法
4. 丰富的插件生态支持

ajax与jQuery的组合就像咖啡和糖——单独使用也不错，但搭配起来才最对味，通过本文的学习，你现在应该能够轻松实现各种无刷新交互功能了，好的用户体验往往就藏在这些"看不见"的细节里。

下次当用户愉快地添加商品而不必等待页面刷新时,他们可能不会注意到你的技术实现，但一定会感受到流畅体验带来的舒适感——这不正是我们前端开发者的价值所在吗？