有勇气的牛排博客
☰

ajax异步请求教程与案例

有勇气的牛排 1238 前端 2023-12-15 08:18:14
知止自律打卡-微信小程序APP
一款微信自律打卡小程序，支持自定义打卡项目、习惯记录、项目日记、专注计时与数据统计。自律打卡、学习打卡、读书打卡、健身打卡、运动打卡、减肥打卡、戒色打卡、养生打卡、戒烟、戒酒、戒熬夜等多种场景。万能打卡模板自由创建。可自定义每日打卡目标，记录习惯连续天数，可视化追踪成长进度。
了解产品详情 →
微信搜索「知止自律打卡」
知止自律打卡微信小程序

ajax异步请求教程与案例

1 前言

AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。它使得网页能够在后台与服务器进行异步交互，而不会影响页面的显示或用户的操作体验，从而实现更加动态和互动的网页应用。

AJAX 主要基于以下几种技术：

  1. JavaScript：用来处理网页的交互逻辑。
  2. XMLHttpRequest 对象：这是 JavaScript 提供的一个用于发送 HTTP 请求和接收响应的 API，能够实现异步通信。
  3. DOM（文档对象模型）：用于动态更新网页内容。
  4. JSON 或 XML：用于在客户端和服务器之间传输数据。虽然名字里有 "XML"，但是 JSON 在实际应用中比 XML 更为常用，因其更轻量和易于解析

2 初始化

导入

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

返回数据准备

{
  "code": 200,
  "msg": "请求成功",
  "data": {
    "title": "有勇气的牛排",
    "url": "https://www.couragesteak.com/",
    "tag": [
      "Python",
      "Java"
    ],
    "data": [
      {
        "id": 1,
        "title": "Java教程"
      },
      {
        "id": 2,
        "title": "Python人工智能"
      }
    ]
  }
}

3 ajax完整请求结构

$.ajax({
	url: '/test',
	type: 'POST',
	dataType: 'json',
	beforeSend: function (request) {
    	// request.setRequestHeader("Authorization", "token");
    },
	headers: {
    	'Authorization': "token"
    },
	data: {
		'money': money
	},
	success:function (res) {
	
	},
	error:function () {
	
	}
});

4 GET 请求

<button id="getBtn">GET请求数据</button>

<script>
  async function get_data() {
    try {
      const res = await $.ajax({
        url: 'http://127.0.0.1:8090/test_json',  // 服务器的 API 接口
        type: 'GET',  // 请求方式
        dataType: 'json',  // 期望返回的数据类型
      });
      console.log(">>> 请求success");
      console.log(res);
      return res.data;  // 返回数据
    } catch (error) {
      console.log(">>> 请求error");
      console.log(error);
    }
  }

  $('#getBtn').on('click', async function () {
    const data = await get_data();  // 点击按钮时触发异步请求
    console.log(">>> 最终结果");
    console.log(data);
    console.log(data.title);
  });

</script>

ajax GET请求案例

5 post json 案例

json这里指json请求体

<script>
  async function post_data(data) {
    try {
      const res = await $.ajax({
        url: 'http://127.0.0.1:8090/test_json_post',
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify(data),  // 将传入的数据对象转换为 JSON 字符串
      });
      console.log(">>> 请求success");
      console.log(res);
      return res;
    } catch (error) {
      console.log(">>> 请求error");
      console.log(error);
    }
  }

  $('#postBtn').on('click', async function () {
    const dataToSend = {
      nickname: '有勇气的牛排'
    };

    const data2 = await post_data(dataToSend);
    console.log(">>> 最终结果");
    console.log(data2);
  });

</script>

6 通用请求封装

<script>
  // 通用的 AJAX 请求函数
  async function ajaxRequest({url, method = 'GET', data = null, contentType = 'application/json', dataType = 'json'}) {
    try {
      const options = {
        url: url,
        type: method,        // 请求方式 GET 或 POST
        contentType: contentType,  // 请求头，默认是 application/json
        dataType: dataType,  // 期望返回的数据类型
      };

      if (method === 'POST' && data) {
        // 如果是 POST 请求，传递 JSON 数据
        options.data = JSON.stringify(data);
      } else if (method === 'GET' && data) {
        // 如果是 GET 请求，直接传递参数对象
        options.data = data;
      }

      const res = await $.ajax(options);  // 发起 AJAX 请求
      console.log(">>> 请求成功");
      console.log(res);
      return res.data;  // 返回服务器响应的数据
    } catch (error) {
      console.log(">>> 请求失败");
      console.log(error);
    }
  }

  // 页面加载完后绑定按钮事件
  $(document).ready(function () {
    // 处理 GET 请求
    $('#getBtn').on('click', async function () {
      const data = await ajaxRequest({
        url: 'http://127.0.0.1:8090/test_json',
        method: 'GET',  // GET 请求
      });
      console.log(">>> GET 请求结果");
      console.log(data);
    });

    // 处理 POST 请求
    $('#postBtn').on('click', async function () {
      const dataToSend = {
        nickname: '有勇气的牛排'
      };
      const data = await ajaxRequest({
        url: 'http://127.0.0.1:8090/test_json_post',
        method: 'POST',  // POST 请求
        data: dataToSend,
      });
      console.log(">>> POST 请求结果");
      console.log(data);
    });
  });
</script>

标签：

×
×