Atopos

1
// 1. 创建XMLHttpRequest对象
2
const xhr = new XMLHttpRequest();
3

4
// 2. 配置请求（请求方法、URL、是否异步）
5
// GET请求：若需传参，可在URL后拼接（如"?id=1&name=test"）
6
xhr.open("GET", "https://api.example.com/user/list", true);
7

8
// 3. 设置请求头（可选，根据后端要求配置，如POST请求传JSON需设置）
9
// 若为POST请求，需添加：xhr.setRequestHeader('Content-Type', 'application/json');
10

11
// 4. 监听请求状态变化，处理响应
12
xhr.onreadystatechange = function () {
13
  // readyState=4表示请求已完成，status=200表示响应成功
14
  if (xhr.readyState === 4 && xhr.status === 200) {
15
    // 解析后端返回的JSON数据（若返回非JSON则直接用xhr.responseText）
16
    const responseData = JSON.parse(xhr.responseText);
17
    console.log("请求成功，返回数据：", responseData);
18
    // 后续业务逻辑：如渲染页面数据
19
  } else if (xhr.readyState === 4) {
20
    // 请求完成但响应失败（如404、500错误）
21
    console.error("请求失败，状态码：", xhr.status);
22
  }
23
};
24

25
// 5. 发送请求（POST请求需传参，如xhr.send(JSON.stringify({id: 1}))）
26
xhr.send();
27

28
// 6. 处理网络错误
29
xhr.onerror = function () {
30
  console.error("网络错误，请求无法发送");
31
};

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

1
$.ajax({
2
  url: "https://api.example.com/user/add", // 请求URL
3
  type: "POST", // 请求方法（GET/POST/PUT/DELETE等）
4
  contentType: "application/json", // 发送数据的格式
5
  data: JSON.stringify({
6
    // 发送给后端的数据
7
    name: "张三",
8
    age: 25,
9
  }),
10
  dataType: "json", // 预期后端返回的数据格式（自动解析）
11
  success: function (response) {
12
    // 请求成功回调
13
    console.log("添加用户成功：", response);
14
  },
15
  error: function (xhr, status, error) {
16
    // 请求失败回调
17
    console.error("添加用户失败：", status, error);
18
  },
19
  complete: function () {
20
    // 请求完成（无论成功/失败）回调
21
    console.log("请求结束");
22
  },
23
});

1
$.get();
2
  语法：
3
    $.get("请求地址"，"请求参数",function(形参){
4

5
    })；
6
$.post();
7
  语法：
8
    $.post("请求地址"，"请求参数",function(形参){
9

10
    })；

1
// GET请求：获取用户列表
2
$.get(
3
  "https://api.example.com/user/list",
4
  { page: 1, size: 10 },
5
  function (response) {
6
    console.log("用户列表：", response);
7
  },
8
  "json",
9
).fail(function (error) {
10
  console.error("获取失败：", error);
11
});
12

13
// POST请求：添加用户
14
$.post(
15
  "https://api.example.com/user/add",
16
  { name: "李四", age: 30 },
17
  function (response) {
18
    console.log("添加成功：", response);
19
  },
20
  "json",
21
).fail(function (error) {
22
  console.error("添加失败：", error);
23
});

1
# npm安装 npm install axios # 或CDN引入
2
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

1
// 1. 基础GET请求（带参数）
2
axios
3
  .get("https://api.example.com/user/list", {
4
    params: { page: 1, size: 10 }, // 自动拼接为URL参数
5
  })
6
  .then(function (response) {
7
    console.log("请求成功：", response.data); // response.data直接是解析后的JSON
8
  })
9
  .catch(function (error) {
10
    // 统一处理错误（包括网络错误、404、500等）
11
    if (error.response) {
12
      // 有响应但状态码错误
13
      console.error("响应错误，状态码：", error.response.status);
14
      console.error("错误数据：", error.response.data);
15
    } else if (error.request) {
16
      // 无响应（网络错误）
17
      console.error("网络错误，无响应：", error.request);
18
    } else {
19
      // 请求配置错误
20
      console.error("请求配置错误：", error.message);
21
    }
22
  });
23

24
// 2. 基础POST请求（传JSON数据）
25
axios
26
  .post(
27
    "https://api.example.com/user/add",
28
    {
29
      name: "王五",
30
      age: 28,
31
    },
32
    {
33
      headers: { "Content-Type": "application/json" }, // 可选，默认已支持JSON
34
    },
35
  )
36
  .then((response) => {
37
    console.log("添加成功：", response.data);
38
  })
39
  .catch((error) => {
40
    console.error("添加失败：", error);
41
  });
42

43
// 3. 结合async/await（更简洁的异步写法）
44
async function getUserList() {
45
  try {
46
    const response = await axios.get("https://api.example.com/user/list", {
47
      params: { page: 1, size: 10 },
48
    });
49
    console.log("用户列表：", response.data);
50
    return response.data;
51
  } catch (error) {
52
    console.error("获取失败：", error);
53
    throw error; // 抛出错误供上层处理
54
  }
55
}
56
// 调用函数
57
getUserList();
58

59
// 4. 高级功能：请求拦截器（添加Token等）
60
axios.interceptors.request.use(
61
  (config) => {
62
    // 给所有请求添加Token
63
    const token = localStorage.getItem("token");
64
    if (token) {
65
      config.headers.Authorization = `Bearer ${token}`;
66
    }
67
    return config;
68
  },
69
  (error) => {
70
    return Promise.reject(error);
71
  },
72
);

1
// 1. 定义要发送的数据（比如提交表单）
2
const postData = {
3
  username: "test",
4
  password: "123456",
5
};
6

7
// 2. fetch 请求中设置请求头
8
fetch("https://api.example.com/login", {
9
  method: "POST", // 请求方法（POST/GET 等）
10
  headers: {
11
    // 自定义请求头：说明请求体是 JSON 格式
12
    "Content-Type": "application/json",
13
    // 自定义请求头：携带身份 Token（如果需要登录后访问）
14
    Authorization: "Bearer your_token_here",
15
  },
16
  // 请求体：要和 Content-Type 对应（这里转成 JSON 字符串）
17
  body: JSON.stringify(postData),
18
})
19
  .then((response) => response.json())
20
  .then((data) => console.log("响应数据：", data))
21
  .catch((error) => console.error("请求错误：", error));