zoukankan      html  css  js  c++  java
  • 前端获取后台数据的方法: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方法:

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

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

  • 相关阅读:
    java面试
    java多态
    java多线程
    Java操作ElasticSearch
    liunx安装jdk
    linux安装Elasticsearch详细步骤
    java IO流
    java递归
    File文件类
    redis单机多节点集群
  • 原文地址:https://www.cnblogs.com/meijifu/p/13168867.html
Copyright © 2011-2022 走看看