当前位置： 首页 > news >正文

axios函数封装

news 2025/9/19 8:35:34

axios函数封装

// 方法：ajax get 五部曲
function ajax_get(url,data) {// 异步对象var ajax = new XMLHttpRequest();// url 方法// 如果是get发送数据 发送的格式为 xxx.php?name=jack&age=18// 所以 这里 需要拼接 urlif (data) {// 如果有值 需要拼接字符串// 拼接为xxx.php?name=jack&age=18url+='?';url+=data;}else{}ajax.open('get',url);// 发送ajax.send();// 注册事件ajax.onreadystatechange = function () {// 在事件中 获取数据 并修改界面显示if (ajax.readyState==4&& ajax.status==200) {console.log(ajax.responseText);}}
}// 方法：ajax_post五部曲
function ajax_post(url,data) {// 异步对象var ajax = new XMLHttpRequest();// url 方法ajax.open('post',url);// 设置 请求报文ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");// 发送if (data) {// 如果 有值 post请求 是在 send中 发送给服务器ajax.send(data);}else{ajax.send();}// 注册事件ajax.onreadystatechange = function () {// 在事件中 获取数据 并修改界面显示if (ajax.readyState==4&&ajax.status==200) {console.log(ajax.responseText);}}}// 方法：将 get 跟post 封装到一起
/*参数1:url参数2:数据参数3:请求的方法参数4:数据成功获取以后，调用的方法
*/
function ajax_tool(url,data,method,success) {// 异步对象var ajax = new XMLHttpRequest();// get 跟post  需要分别写不同的代码if (method=='get') {// get请求if (data) {// 如果有值url+='?';url+=data;}else{}// 设置 方法 以及 urlajax.open(method,url);// send即可ajax.send();}else{// post请求// post请求 url 是不需要改变ajax.open(method,url);// 需要设置请求报文ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");// 判断data send发送数据if (data) {// 如果有值 从send发送ajax.send(data);}else{// 木有值 直接发送即可ajax.send();}}// 注册事件ajax.onreadystatechange = function () {// 在事件中 获取数据 并修改界面显示if (ajax.readyState==4&&ajax.status==200) {// console.log(ajax.responseText);// 将 数据 让 外面可以使用// return ajax.responseText;// 当 onreadystatechange 调用时 说明 数据回来了// ajax.responseText;// 数据成功获取以后，执行方法success()。//我们把获取的数据作为 success()的参数，意思是：//success方法是外面的，数据是里面给的。那数据就变相地传递到了外面去【重要】success(ajax.responseText);}}}

函数调用（get方法）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><input type="button"  value="测试get" id='ajax_get'>
</body>
</html>
<!-- 导入 封装的js -->
<script type="text/javascript" src='ajax_tool.js'></script>
<script type="text/javascript">document.querySelector('#ajax_get').onclick = function () {// 直接使用 封装的 工具函数即可/*参数1:url参数2:数据参数3:请求的方法参数4：请求成功后，调用的方法*/var backData = ajax_tool('test_get.php','name=smyhvae&skill=code','get',function(data){console.log(data);});// 测试console.log(backData);}
</script>

函数调用（post方法）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><input type="button"  value="测试post" id='ajax_post'>
</body>
</html>
<!-- 导入 封装的js -->
<script type="text/javascript" src='ajax_tool.js'></script>
<script type="text/javascript">document.querySelector('#ajax_post').onclick = function () {// 直接使用 封装的 工具函数即可/*参数1:url参数2:数据参数3:请求的方法参数4:数据获取成功调用的方法*/var backData = ajax_tool('02.test_post.php','friend=好丽友','post',function(data){console.log(data);});// 测试console.log(backData);// 怎么样 处理数据 全部写在 匿名函数中ajax_tool('02.test_post.php','friend=好丽友','post',function(data){console.log(data);// 修改页面的显示呢?});}
</script>
http://www.dtcms.com/a/389685.html

相关文章：

  • NewSQL——核心原理与内部机制
  • 《从 0 到 1 打通网络服务任督二脉：域名、服务器与多站点配置全攻略》​
  • vue3学习日记(十七)：动态路由使用解析
  • SpringBoot 启动流程
  • .NET驾驭Word之力：结构化文档元素操作
  • 解密F5负载均衡：优化网络性能的关键
  • 使用 .NET Core 6 Web API 的 RabbitMQ 消息队列
  • 时空预测论文分享：图时空注意力网络 ConvLSTM 时空演变
  • 千问大模型部署笔记
  • 网络：开源网络协议栈介绍
  • 设计模式(C++)详解—装饰器模式(3)
  • 双重锁的单例模式
  • 管理 Git 项目中子模块的 commit id 的策略
  • 跨境电商API数据采集的流程是怎样的？
  • rust编写web服务07-Redis缓存
  • 第三十三天：高精度运算
  • 写联表查询SQL时筛选条件写在where 前面和后面有啥区别
  • ARM(13) - PWM控制LCD
  • Python基础 3》流程控制语句
  • 牛客算法基础noob44——数组计数维护
  • 并发编程原理与实战（三十）原子操作进阶，原子数组与字段更新器精讲
  • 前端-详解Vue异步更新
  • 基于风格的对抗生成网络
  • 【JavaScript】SSE
  • JAVA算法练习题day15
  • 线性表---双链表概述及应用
  • 作业帮前端面试（准备）
  • 51单片机-使用单总线通信协议驱动DS18B20模块教程
  • 全文单侧引号的替换方式
  • NVIDIA RTX4090 在Ubuntu系统中开启P2P peer access 直连访问