前端获取后台数据的方法:ajaxaxiosfetch
Posted 文艺小书生
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端获取后台数据的方法:ajaxaxiosfetch相关的知识,希望对你有一定的参考价值。
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方法:
get方法:(因为默认为get,因此method和headers可省略)
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) }); }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) }); }有些是参考网上其他大神的写法,能力有限,不足之处,请多多谅解!!欢迎指正!!!
以上是关于前端获取后台数据的方法:ajaxaxiosfetch的主要内容,如果未能解决你的问题,请参考以下文章
怎么使用 JavaScript 将网站后台的数据变化实时更新到前端