码迷,mamicode.com
首页 > 移动开发 > 详细

前端获取后台数据的方法:ajax、axios、fetch

时间:2020-06-20 17:09:46      阅读:66      评论:0      收藏:0      [点我收藏+]

标签:head   form   cti   hot   script   javascrip   jquery   strong   formdata   

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)
      });
  }

有些是参考网上其他大神的写法,能力有限,不足之处,请多多谅解!!欢迎指正!!!

前端获取后台数据的方法:ajax、axios、fetch

标签:head   form   cti   hot   script   javascrip   jquery   strong   formdata   

原文地址:https://www.cnblogs.com/meijifu/p/13168867.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!