index.html 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>AJAX Example</title>
  7. </head>
  8. <body>
  9. <script>
  10. // 定义一个 ajaxGet 函数,用于发起 GET 请求
  11. function ajaxGet(option) {
  12. // 检查是否提供了 URL 参数
  13. if (!option.url) {
  14. return alert('url 必传'); // 如果没有 URL,弹出警告
  15. }
  16. let str = ''; // 用于存储查询字符串
  17. // 检查是否有查询参数
  18. if (option.query) {
  19. str = '?'; // 初始化查询字符串
  20. // 遍历查询对象的每一个键值对
  21. for (let key in option.query) {
  22. // 将每个键值对添加到查询字符串中,并进行 URL 编码
  23. str += `${encodeURIComponent(key)}=${encodeURIComponent(option.query[key])}&`;
  24. }
  25. str = str.slice(0, -1); // 去掉最后的 '&'
  26. }
  27. // 使用 fetch API 发起 GET 请求
  28. fetch(option.url + str)
  29. .then(response => {
  30. // 检查响应是否成功
  31. if (!response.ok) {
  32. throw new Error(`HTTP error! status: ${response.status}`); // 如果响应不成功,抛出错误
  33. }
  34. return response.text(); // 返回响应的文本内容
  35. })
  36. .then(data => {
  37. // 调用 success 回调函数,并传入获取的数据
  38. option.success && option.success(data);
  39. })
  40. .catch(err => {
  41. // 如果发生错误,调用 error 回调函数
  42. option.error && option.error(err);
  43. });
  44. }
  45. //调用 ajaxGet 函数
  46. ajaxGet({
  47. url: '2024demo.txt',
  48. query: { // 查询参数
  49. name: 'zhangsanfeng', // 用户名
  50. age: 20 // 年龄
  51. },
  52. success: (data) => {
  53. console.log(data); // 成功时在控制台打印返回的数据
  54. },
  55. error: (err) => {
  56. console.error(err); // 发生错误时在控制台打印错误信息
  57. }
  58. });
  59. </script>
  60. </body>
  61. </html>