ajax学习笔记
迪丽瓦拉
2025-05-29 14:15:13
0

1. axios

axios.get('url', {

  params: {id:1, age:18}, // get请求url参数

  headers: { key: 值...}, // 请求头信息

}).then(res => {

  console.log(res);

});

axios.post(

'url', {

  params: {id:1, age:18}, // post请求url参数

  headers: { key: 值...}, // 请求头信息

  data: {key : 值...}, // post请求体

}).then(res => {

  console.log(res);

});

2. axios函数

axios({

  method: 'POST',

  url :'...',

  params: {...},

  headers: {...},

  data: {...}

}).then(res => {

});

3. fetch函数

fetch(url, {method:..., header..., body:' '}).then(res => {...})

4. jquery

定义:$.ajax({ })

参数:type 请求方式 get/post 。url 请求地址。 async 是否异步 true是 false 否。

data 发给服务器数据。 dataType 预期服务器返回类型。 contentType 请求头。success 请求成功调用函数。error 请求失败调用函数

$.ajax({

  type: "get",

  url: "./.../xxx",

  data: {

    name: "张三",

    age: 18

  },

  dataType: "json",

  success: function(res) {

    // 不指定dataType返回的是字符串需要转换

    // 例 var result = JSON.parse(res);

  }

})

$.get  // 从服务器取数据

$.post // 往服务器提交数据

$.getJSON // 获取json格式数据

5. XMLHttpRequest

const xhr = XMLHttpRequest();

xhr.open('GET', 'url'); // 设置请求url

xhr.send(); // 发送请求

xhr.onreadystatechange = function(){

  xhr.readState // 0 未初始化, 1 open完毕, 2 send完毕, 3 返回部分数据, 4 返回全部数据

  xhr.status // 200+都是正常

  if( xhr.readState==4 && xhr.status == 200) {

    xhr.getAllResponseHeaders(); // 获取响应头

    xhr.response(); // 获取响应体

  }

get请求参数写在url里

post请求以字符串形式写在 send参数里

防止重复提交,取消请求的函数 xhr.abort(); 

相关内容

热门资讯

linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
C++ 机房预约系统(六):学... 8、 学生模块 8.1 学生子菜单、登录和注销 实现步骤: 在Student.cpp的...
A.机器学习入门算法(三):基... 机器学习算法(三):K近邻(k-nearest neigh...
数字温湿度传感器DHT11模块... 模块实例https://blog.csdn.net/qq_38393591/article/deta...
有限元三角形单元的等效节点力 文章目录前言一、重新复习一下有限元三角形单元的理论1、三角形单元的形函数(Nÿ...
Redis 所有支持的数据结构... Redis 是一种开源的基于键值对存储的 NoSQL 数据库,支持多种数据结构。以下是...
win下pytorch安装—c... 安装目录一、cuda安装1.1、cuda版本选择1.2、下载安装二、cudnn安装三、pytorch...
MySQL基础-多表查询 文章目录MySQL基础-多表查询一、案例及引入1、基础概念2、笛卡尔积的理解二、多表查询的分类1、等...
keil调试专题篇 调试的前提是需要连接调试器比如STLINK。 然后点击菜单或者快捷图标均可进入调试模式。 如果前面...
MATLAB | 全网最详细网... 一篇超超超长,超超超全面网络图绘制教程,本篇基本能讲清楚所有绘制要点&#...