jQuery get() 方法（手把手讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代前端开发中，与服务器进行数据交互是常见的需求。jQuery get() 方法作为 jQuery 库中轻量级的 AJAX 工具，能够高效完成 HTTP GET 请求，帮助开发者快速获取并处理远程数据。无论是加载静态 HTML 内容，还是从 API 获取动态数据，这个方法都能提供简洁的解决方案。本文将从零开始，通过案例与代码示例，逐步解析 jQuery get() 方法的使用场景、核心参数、进阶技巧，以及常见问题的解决方法。

一、什么是 jQuery get() 方法？

jQuery get() 方法是 jQuery 提供的一个简化版 AJAX 请求工具，专门用于发送 GET 类型的 HTTP 请求。它类似于 $.ajax()，但语法更简单，适合快速实现基础的数据获取需求。

比喻理解：快递员的角色

可以将 get() 方法想象为一位“快递员”：

• 目标地址（URL）：快递员需要知道要取件的地址（即服务器端的接口路径）。
• 包裹内容（数据）：成功取件后，快递员会将数据带回（即服务器返回的响应内容）。
• 处理包裹（回调函数）：用户收到包裹后需要处理（如解析 JSON 数据或更新页面元素）。

通过这个比喻，开发者可以直观理解 get() 方法的核心流程：发送请求 → 获取数据 → 处理数据。

二、基础语法与核心参数

1. 基础语法

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

• url（必填）：请求的目标 URL 地址。
• data（可选）：附加到请求的键值对参数，格式为对象或字符串。
• success（可选）：请求成功时执行的回调函数，接收服务器返回的数据作为参数。
• dataType（可选）：指定预期的响应数据类型，如 "html"、"json" 或 "xml"。

2. 参数详解

三、实战案例：使用 get() 方法获取数据

案例 1：动态加载 HTML 内容

假设有一个外部文件 data.html，内容为：

<div class="content">这是从服务器加载的 HTML 内容</div>  

通过 get() 方法将其加载到当前页面的 <div id="target"> 中：

$.get("data.html", function(data) {  
  $("#target").html(data); // 将返回的 HTML 直接插入目标元素  
});  

此代码会自动将 data.html 的内容解析为 HTML，并插入到页面中。

案例 2：传递参数并处理 JSON 数据

假设有一个 API 接口 /api/users，支持通过 id 参数查询用户信息：

// 请求 URL 为 "/api/users?id=456"  
$.get({  
  url: "/api/users",  
  data: { id: 456 },  
  dataType: "json",  
  success: function(user) {  
    console.log("用户姓名：", user.name);  
    console.log("用户邮箱：", user.email);  
  }  
});  

此处通过对象形式传递 data 参数，并指定 dataType: "json"，jQuery 会自动将服务器返回的 JSON 字符串转为 JavaScript 对象。

四、get() 方法 vs. getJSON() 方法

虽然 get() 和 getJSON() 都用于 GET 请求，但两者有以下区别：

示例对比：

// 使用 get() 获取 JSON  
$.get("api/data.json", null, data => {  
  console.log(data); // 需要显式设置 dataType 或手动解析  
}, "json");  

// 使用 getJSON() 简化操作  
$.getJSON("api/data.json", function(data) {  
  console.log(data); // 自动解析为对象  
});  

五、进阶技巧与常见问题

1. 处理请求失败（错误回调）

通过 $.ajaxSetup() 或在 $.get() 中添加 error 参数，可以捕获请求失败的情况：

$.get({  
  url: "/api/invalid-endpoint",  
  success: function() {  
    console.log("请求成功");  
  },  
  error: function(jqXHR, textStatus, errorThrown) {  
    console.error("请求失败：", textStatus, errorThrown);  
  }  
});  

2. 传递复杂参数对象

如果需要传递嵌套对象或数组，需先通过 JSON.stringify() 转换为字符串：

const data = {  
  user: { name: "Bob", age: 25 },  
  tags: ["tech", "sports"]  
};  

$.get({  
  url: "/api/submit",  
  data: JSON.stringify(data), // 需要手动转换  
  contentType: "application/json", // 指定请求头  
  success: function(response) { /* ... */ }  
});  

3. 跨域请求（CORS）

如果目标 URL 与当前页面不在同源，需确保服务器支持 CORS。若需强制跨域，可以使用 $.ajax() 并设置 crossDomain: true，但 get() 方法本身不直接支持此配置。

六、常见问题解答

Q1：为什么 get() 方法没有触发回调？

• 可能原因：
  1. URL 路径错误或服务器未响应。
  2. 未指定 dataType，导致数据格式不匹配（例如返回 JSON 但未指定 dataType: "json"）。
• 解决方法：

  $.get("api/data.json", null, function(data) {  
    console.log(typeof data); // 检查数据类型是否符合预期  
  }, "json");  
  

Q2：如何在 get() 中传递多个参数？

可以通过对象形式传递：

$.get({  
  url: "/api/search",  
  data: {  
    keyword: "jQuery",  
    page: 2,  
    sort: "date"  
  },  
  success: function(results) { /* ... */ }  
});  

请求的 URL 会自动生成为：/api/search?keyword=jQuery&page=2&sort=date。

结论

jQuery get() 方法凭借其简洁的语法和强大的功能，成为前端开发者快速实现数据交互的利器。从基础的 HTML 内容加载，到复杂的 JSON 数据处理，开发者可以通过灵活配置参数和回调函数，高效完成各种场景下的需求。

通过本文的案例和技巧，读者可以掌握 get() 方法的核心用法，并解决常见问题。对于希望进一步优化性能或处理复杂请求的开发者，建议深入学习 $.ajax() 方法，或结合现代框架（如 Fetch API 或 Axios）探索更多可能性。

记住：熟练掌握 get() 方法不仅能提升开发效率，还能为理解更复杂的异步编程模式打下坚实基础。