有勇气的牛排博客
☰

ajax异步请求教程与案例

有勇气的牛排 304 前端 2023-12-15 08:18:14

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>

留言

专栏
文章
加入群聊
程序员兼职接单交流
编程交流