jQuery 是一个功能强大的 JavaScript 库，最初的目的就是简化 JavaScript 的编程 ，尤其是在早期浏览器兼容性不一致的年代。可以用于各种用途：

✅ DOM 操作

✅ 事件处理

✅ 动画效果

✅ 表单处理

✅ Ajax 通信（只是其中一部分）

你可以只用 jQuery 做很多纯 JS 的事，比如：

// 原生 JS
document.getElementById("btn").addEventListener("click", function() {
    alert("Clicked!");
});
 
// jQuery 写法
$("#btn").click(function() {
    alert("Clicked!");
});

jQuery 操作 ajax

$.ajax() 是 jQuery库里用于发送异步 HTTP 请求的核心方法 ，它帮你用一句代码搞定向服务器发请求、接收响应、处理成功和失败回调的整个流程。

• $：jQuery 的标志符，代表调用 jQuery 相关功能。

• .ajax()：jQuery 提供的一个方法，专门用来发送 AJAX 请求。

它到底做了啥？

1. 根据你传进去的配置（比如请求地址、方式、参数等），它帮你向服务器发起异步请求。

2. 请求发出去后，它不会阻塞页面，页面依然可以响应用户操作（这就是 "异步"）。

3. 服务器响应回来后，jQuery 根据返回结果自动调用你定义的回调函数（比如 success、error）处理数据。

4. 让你能动态更新页面内容，用户体验更流畅，不用整个页面刷新。

解释一下 $.ajax() 里的那个 {} 对象

这个花括号 {}是 配置对象 ，用来告诉 $.ajax() 你这次请求要干什么，比如：

• 请求地址（url）

• 请求方法（type 或 method，默认是 GET）

• 请求参数（data）

• 期望的响应数据格式（dataType）

• 请求内容格式（contentType）

• 成功和失败的回调函数（success、error）

• 还有更多高级配置，比如请求头、超时设置等

<!-- 假设这是 HTML 页面 -->
<button id="loadBtn">加载用户信息</button>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $('#loadBtn').click(function() {
    $.ajax({
      url: '/api/user',       // 请求地址
      type: 'POST',           // 请求方法
      data: {                 // 传给服务器的参数
        username: 'liren',
        password: '123123'
      },
      dataType: 'json',      // 期望返回的数据格式（json / text / html）
      success: function(data) {
        console.log('用户数据:', data); // 成功回调
      },
      error: function(err) {
        console.error('请求失败:', err); // 失败回调
      }
    });
  });
</script>
 

💥注意事项

在表单传参时候，如果想在后端直接用一个类对象来拿到表单所有内容，则要使用 @RequestBody 来进行序列化。

而这个前提要求是把 JavaScript对象变成 JSON字符串发送给后端 ，要用到 JSON.stringify() 💡这个函数是前端发 JSON 数据的关键操作，因为这样子后端才能用 @RequestBody 来进行接收，不然的话收到的都是普通字符串，此时会出现错误！

此外还需要声明 contentType: "application/json"，指明当前传的内容类型就是 json 格式的！

// 需要将对象转化为json字符串，后端才能用一个类对象接收~💥💥💥
// 并且推荐将这个转化过程拎出来写，才不会导致ajax中的代码看起来很复杂~
let mybody = JSON.stringify({
    username: 'admin',
    password: '123456'
  });
  
$.ajax({
  method: 'POST',
  contentType: 'application/json'  // 告诉后端这是 JSON 格式💥💥💥
  body: mybody
});

而如果是后端原本期望响应一个 JSON 字符串而不是普通文本，这样子前端在接收到 JSON 字符串之后可以按照格式转变为 JavaScript 对象进行操作，但是由于后端忘记设置响应类型为 application/json，导致后端响应的是一个普通文本比如 text/plain，此时前端拿到一个 JSON 字符串，但格式确实普通文本，没办法进行转换，所以前端的代码如果接收的参数当作对象操作的话，就会报错，因为压根就没办法转化为对象！

此时就用到了 JSON.parse()手动将 JSON字符串转化为 JavaScript对象 ，才安全，如下所示：

$.ajax({
    ...
*    *success: function(result) {
        let jsonObj = JSON.parse(result); *// 确保拿到的是一个对象，而不是字符串*
        
        // 没有转化的话，下面就会直接报错
*        *if(result.ok == 1) {
            ...
        } else {
            *alert*("留言失败！");
        }
    }
});

注意： 如果 result已经是一个对象，再去 JSON.parse(result)，就会报错 ！

jQuery 常用方法大全（分类 + 示例）