首页 > 其他分享 >ajax--fetch--axios

ajax--fetch--axios

时间:2022-10-09 09:58:32浏览次数:63  
标签:axios console log -- res json url ajax data

// 基本用法无参数get请求
$.ajax({
    url:"demo_test.txt",
    success:function(result){
        console.log(result);
    }
}
// 需指定方法则增加method字段
$.ajax({
    url:"demo_test.txt",
    method:"POST",
    success:function(result){
	console.log(result);
    }
}
// 有参数,则增加data字段,有请求头则增加headers字段,有错误处理增加error字段
// 默认是按照表单提交post方法,data中虽然是json但是提交时转成表单
$.ajax({
    url:"demo_test.txt",
    data:{a:10},
    success:function(result){
    	console.log(result);
    },
    error:function(xhr,status,error){
    	console.log(error);
    }
});
// data在post下是表单格式,在get下是querystring格式
// 通过以下方法指定为json格式[json格式本质就是body里是json字符串,头里是application/json]
$.ajax({
    url:"demo_test.txt",
    headers:{ contentType: "application/json"},
    method:"POST",
    data:JSON.stringify({a:10}),
    success:function(result){
	console.log(result);
    }
});

fetch

// fetch的post表单数据用法
fetch(url,{
    headers:{
         'content-type': "application/x-www-form-urlencoded"
    },
    method:"POST",
    body:"a=12&b=33",
})
.then(res=>res.json())
.then(data=>console.log(res))
.catch(e=>{})
// fetch的post json数据用法
fetch(url,{
    headers:{
         'content-type': "application/json"
    },
    method:"POST",
    body:JSON.stringify({a:100}),
})
.then(res=>res.json())
.then(data=>console.log(res))
.catch(e=>{})

axios

// axios默认是json类型的提交
axios({
    url:"http://localhost:99?x=1",
    method:"POST",
    data:{a:12}
})
.then(res=>console.log(res.data))
// 如果想改成form则需要修改headers和data格式
axios({
    url:"http://localhost:99?x=1",
    method:"POST",
    headers:{"Content-Type":"application/x-www-form-urlencoded"},
    data:"a=12&b=23"
})
.then(res=>console.log(res.data))

简写

JQuery的get和post可以简写:

$.get(url,data,callback)  // querystring格式
$.post(url,data,callback) // x-www-form-urlencoded格式

axios的get/post/put/delete等等都可以简写

axios.post(url,data).then(callback)

如下是转载地址
https://github.com/sunwu51/notebook/blob/master/19.07/ajax_jquery%2Cfetch%2Caxios.md
 

标签:axios,console,log,--,res,json,url,ajax,data
From: https://www.cnblogs.com/zhangzaizz/p/16771093.html

相关文章

  • transform旋转
    一:rotate()2D旋转单位deg 度(Degrees)grad梯度(Gradians)rad 弧度(Radians)turn 转、圈(Turns)例:transform:rotate(45deg);......
  • Leetcode 117 -- 树&&bfs
    题目描述填充每个节点的下一个节点题目要求我们填充每个节点的\(next\)指针,让它指向它的(同一层)右侧的节点,如果没有,指向$NULL,(初始时全部指向\(NULL\))。思路看到......
  • hive导入mysql
    hive测试——HIVE数据分析02题目:4、处理结果入库:(在虚拟机安装mysql)  将上述统计分析的结果数据保存到mySQL数据库中。 #text3_1入库#1.添加驱动,在hive的lib......
  • Redis学习:Redis在Windows下的安装
    一、Redis1、官网地址:**GitHub地址:https://github.com/MSOpenTech/redis/tags备注:现在的Redis官网没有Windows版的下载链接了,只能到GitHub上下载,截止到此刻的最新版本......
  • 《每天一遍,七分再见》(转)
    朝辞白帝彩云间,夕贬潮州路八千两岸猿声啼不住,孤帆一片日边来两岸猿声啼不住,病树前头万木春不畏浮云遮望眼,只缘身在此山中唧唧复唧唧,寒光照铁衣归来见天子,对镜贴花黄......
  • 实验5:开源控制器实践——POX
    实验5:开源控制器实践——POX(一)基本要求验证Hub模块h1pingh2h1pingh3验证Switch模块h1pingh2h1pingh3L2_learning模块流程图(二)进阶要求1.重新搭建(一......
  • nuxt 服务端渲染注意事项
    1.路由nuxt按照pages文件夹的目录结构自动生成路由http://localhost:3000/user/reg相当于去访问pages文件夹下的user文件夹下的reg.vuevue需在src/router/in......
  • 【转载】分享一个查看分析Oracle表空间使用情况的脚本
    该脚本来自潇湘隐者的公众号,虽然目前不管理oracle数据库了,但是可以用作学习使用。 个人一直使用下面这个脚本查看、分析Oracle数据库表空间的使用情况,这个脚本经过我不......
  • 归并算法及求逆序对例题
    归并算法及求逆序对例题归并算法思路首先先确定分界点mid,分界点为mid=(l+r)/2,也就是整个数列的中间,将整个数列通过这个分界点一分为二。分别递归左右两个序列,......
  • [2core]EFCore对象关系映射
    迁移问题新建一个webapi项目,然后安装EFCore类库,以及ERCore.SqlServer类库,像使用ASP.NET4.x一样采用DBFirst模式,创建ADO.NET实体数据模型。步骤没有错,可此时VS2022提示“......