前端向后端获取数据的三种方法:ajax、axios、fetch
1、jQuery中的ajax
get方法:
$.ajax({
url:"v4/api/film/now-playing?t=1539401039415&page=1&count=5",
type:"GET",
success:(result)=>{
return result
}
})
post方法:
$.ajax({
type: "POST",
url: "v4/api/film/now-playing",
data: {
t:"1539401039415",
page:"1",
count:"5"
},
success: function(result){
return result
}
});
2、axios的方式
get请求方式:
import axios from 'axios'
axios({
method:"get"
url:"/listall/list"
params: { //向后端传的参数
code: '1234',
name: 'yyy',
},
})
.then(result => {
return result.data
})
.catch(error => {
return error
})
post请求方式:
import axios from 'axios' let data = new FormData();
data.append('code','1234');
data.append('name','yyyy'); axios({
method:"post"
url:"/listall/list"
data //向后端传的参数
})
.then(result => {
return result.data
})
.catch(error => {
return error
})
3、fetch方法:
post方法:
return () => {
let formData = new FormData();
formData.append('city_id', index);
fetch('/index/hotsShowList', {
method: 'POST',
headers:{
'Accept': 'application/json, text/javascript, */*; q=0.01'
},
body: formData
}).then(response => {
// 将数据处理为 JSON 格式,返回一个 Promise
return response.json();
})
.then(data => {
// console.log(data.data)
});
}
get方法:
return () => {
fetch('/index/hotsShowList?city_id=5', {
method: 'GET',
headers:{
'Accept': 'application/json, text/javascript, */*; q=0.01'
},
}).then(response => {
// 将数据处理为 JSON 格式,返回一个 Promise
return response.json();
})
.then(data => {
// console.log(data.data)
});
}
前端向后端获取数据的三种方法:ajax、axios、fetch的更多相关文章
- Struts2(四.注册时检查用户名是否存在及Action获取数据的三种方式)
一.功能 1.用户注册页面 <%@ page language="java" contentType="text/html; charset=UTF-8" ...
- jQuery中通过JSONP来跨域获取数据的三种方式
第一种方法是在ajax函数中设置dataType为'jsonp' $.ajax({ dataType: 'jsonp', url: 'http://www.a.com/user?id=123', su ...
- 体温数据上传程序开发+获取时间的三种方法+DB Browser下载及安装
今天开始了体温上传程序的开发 今日所学: 获取时间 (21条消息) (转)安卓获取时间的三种方法_sharpeha的博客-CSDN博客_安卓获取时间 DB Browser安装教程 (20条消息) sq ...
- 关于Hive创建分区目录且能查到数据的三种方法
关于Hive创建分区目录且能查到数据的三种方法 1. 使用dfs -mkdir 和 dfs -put 分别创建分区目录和上传数据,此时执行msck repair table 表名 命令就能查询到数据 ...
- java 获取随机数的三种方法
方法1(数据类型)(最小值+Math.random()*(最大值-最小值+1))例:(int)(1+Math.random()*(10-1+1))从1到10的int型随数 方法2获得随机数for (i ...
- python网络编程调用recv函数完整接收数据的三种方法
最近在使用python进行网络编程开发一个通用的tcpclient测试小工具.在使用socket进行网络编程中,如何判定对端发送一条报文是否接收完成,是进行socket网络开发必须要考虑的一个问题.这 ...
- 去除DataTable重复数据的三种方法
业务需求 最近做一个把源数据库的数据批次导出到目标数据库.源数据库是采集程序采集而来的原始数据库,所以需要对其进行一些处理(过滤一些为空,长度太短或太长,非法字符,重复数据)然后在进行入库. 其中要避 ...
- 去除DataTable重复数据的三种方法(转)
转自:https://www.cnblogs.com/sunxi/p/4767577.html 业务需求 最近做一个把源数据库的数据批次导出到目标数据库.源数据库是采集程序采集而来的原始数据库,所以需 ...
- C# Entity Framework 更新数据的三种方法
例: 实体类: public class TestDbContext : DbContext { public DbSet<Test> Tests { get; set; } public ...
随机推荐
- PHP 判断时间段 至今过了多长时间
/** * * @param timestamp $time 输入时间 * @return str $str 输入时间与现在时间差的中文 */ function wordTime($time) { / ...
- [Javascript] Working with Static Properties on a Class
Classes are syntactic sugar over functions and functions are also referred to as "callable" ...
- 中国大学生计算机系统与程序设计竞赛 CCF-CCSP-2016 选座( ticket_chooser )
选座( ticket_chooser ) 不会正解,欢迎讨论 //60分 #include<cstdio> #define max(a,b) (a)>(b)?a:b #define ...
- web前端开发高级
前端高效开发框架技术与应用 Vue 基础Vue 框架简介 MVX 模式介绍Vue 框架概述如何使用 Vue.js 基础语法 实例对象生命周期模板语法计算属性Methods 方法 渲染 列表渲染条件渲染 ...
- C++ STL(标准模板库)的学习了解
C++ STL(标准模板库)是一套功能强大的 C++ 模板类,提供了通用的模板类和函数,这些模板类和函数可以实现多种流行和常用的算法和数据结构,如向量.链表.队列.栈. C++ 标准模板库的核心包括以 ...
- [技术博客] 【vagrant】硬盘扩容
同样,这也是少昂早年走过的坑,这里直接贴出少昂个人博客链接:https://www.cnblogs.com/HansBug/p/9447020.html PS:有一位经验丰富的后端大佬坐镇指挥是多么幸 ...
- 【转】目前为止最透彻的的Netty高性能原理和框架架构解析
转自:https://zhuanlan.zhihu.com/p/48591893 1.引言 Netty 是一个广受欢迎的异步事件驱动的Java开源网络应用程序框架,用于快速开发可维护的高性能协议服务器 ...
- 主题模型(LDA)(一)--通俗理解与简单应用
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_39422642/article/de ...
- pom.xml activatedProperties --spring.profiles.active=uat 对应
<profiles> <profile> <id>dev</id> <properties> <!-- 环境标识,需要与配置文件的名称 ...
- hive删除空分区
当hive中分区字段有NULL值时,hive会使用dynamic partition,数据会放到一个特殊的分区,这个分区由参数“hive.exec.default.partition.name”控制, ...