精华内容
下载资源
问答
  • 2019-03-25 15:34:38
    $(document).ready(function () {
        $.get("/api/menu/5",function (data) {
            alert(data);
            //zTreeObj = $.fn.zTree.init($("#menuTree"), setting, data);
         })
        //zTreeObj = $.fn.zTree.init($("#menuTree"), setting, zNodes);   //ztree加载
      //  var nodes = zTreeObj.getNodes()[0].children;
     
    });
    

    data是controlloer返回来的数据

    下面是controller的代码

            public string Get(int id)
            {
                return "value"+id;
            }
    
    更多相关内容
  • 本文实例为大家分享了小程序云函数调用API接口的具体代码,供大家参考,具体内容如下 以下例子是调用小程序官方的API,如何调用API来进行对内容的安全检测: 第一步:新建一个文件名为msgCheck的Node.js的云函数,...
  • 调用api接口

    千次阅读 2022-03-05 10:03:17
    我们平常是怎么调用接口的呢?在Vue中我们平常通过axios这个库来调用接口,但是在uniapp进行开发,那么就要借用uniapp的库来进行开发,接下来我们一起来探究下。 一.uni.request(OBJECT) 作用:发送网络请求 ...

    我们平常是怎么调用接口的呢?在Vue中我们平常通过axios这个库来调用就接口,但是在uniapp进行开发,那么就要借用uniapp的库来进行开发,接下来我们一起来探究下。

    一.uni.request(OBJECT)

    作用:发送网络请求

    OBJECT参数说明:

    1.url

    类型:String

    必填:是

    默认值:无

    说明:开发者服务器接口地址

    2.data

    类型:Object/String/ArrayBuffer

    必填:是

    默认值:无

    说明;请求的参数

    3.header

    类型:Object

    必填:否

    默认值;无

    说明:设置请求的header,header中不能设置Referer

    平台差异说明:APP ,H5端会自动带上cookie,且H5端不可手动修改

    4.method

    类型: String

    必填:否

    默认值:GET

    5.timeout

    类型:Number

    必填:否

    默认值:超过时间,单位ms

    6.dataType

    类型:String

    必填:否

    默认值:json

    说明:如果设为json,会尝试对返回的数据做一次JSON.parse

    7.responseType

    类型:String

    必填:否

    默认值:text

    说明:设置响应的数据类型,合法值:text,arraybuffer

    8.sslVerify

    类型:Boolean        

    必填:否

    默认值:true        

    说明:验证ssl证书

    9.success

    类型:Function

    必填:否

    默认值:无

    说明:收到开发者服务器成功返回的回调函数

    10.fail

    类型:Function

    必填:否

    默认值:无

    说明:接口调用失败的回调函数

    11.complete

    类型:Function

    必填:否

    默认值:无

    说明:接口调用结束的回调函数(调用成功,失败都会执行)

    二.method有效值

    注意:method有效值必须大写,每个平台支持的method有效值不同,详情见下表。

    三.success返回参数说明

     data数据说明

    最终发送给服务器的数据是String类型,如果传入的data不是String类型,会被转换成String。转换规则如下:

    • 对于 GET 方法,会将数据转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18
    • 对于 POST 方法且 header['content-type'] 为 application/json 的数据,会进行 JSON 序列化。
    • 对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据,会将数据转换为 query string

    四.使用uniapp发送一个成功的请求

    我使用的是mockfast来模拟一个服务器从而达到发送请求的目的。

    1.准备好一个mock来模拟数据

     

    2.给按钮绑定一个点击事件,通过success成功的回调来获取数据

    代码:

    <template>
    	<view class="">
     <button type="warn" @click="fn">点击发送请求</button>	
    	 {{aa}}
    	</view>
     
    
    </template>
    
    <script>
    export default {
     data () {
        return {
          aa:''
        }
      },
      methods: {
    	  fn(){
    		uni.request({
    		    url: 'https://www.fastmock.site/mock/010910d86b5019f8016429f50c680e58/api/test', //仅为示例,并非真实接口地址。
    		    success: (res) => {
    		       this.aa=res.data.name
    
    		    }
    		});
    		
    		}
         }
    
    }
    </script>
    
    <style>
    	
    </style>

    图示:

     

     

    五.fail失败之后的回调

    1.将url的地址进行修改

     打印后的结果

     

     

    六.测试一下complete

    说明:接口调用结束的回调函数(调用成功,失败都会执行)

    1.接口调用失败后

     

      

    2.接口调用成功执行

     

     

    3.应用场景用

    请求完成后的一些相应操作

    七.封装一个uni.request

    对uni.request的一些共同参数进行简单的封装,减少重复性数据请求代码。方便全局调用。

    步骤:

    1.先在目录下创建unils和common 2个文件夹

     utils是存放工具类的,common用来放置常用方法的

    之后在utils中创建request.js用来放置uni.request的请求方法,在对其进行简单的封装

    2.requset.js 代码(utils文件夹里面)

    import operate from '../common/operate.js'
    // vuex 的使用  详情参考官网 https://uniapp.dcloud.io/vue-vuex
    import store from '../store/index.js'  
    
    export default class Request {
        http(param) {
            // 请求参数
            var url = param.url,
                method = param.method,
                header = {},
                data = param.data || {},
                token = param.token || "",
                hideLoading = param.hideLoading || false;
    
            //拼接完整请求地址
            var requestUrl = operate.api + url;
           //拼接完整请求地址(根据环境切换)
           // var requestUrl = operate.api() + url;
    
            //请求方式:GET或POST(POST需配置
            // header: {'content-type' : "application/x-www-form-urlencoded"},)
            if (method) {
                method = method.toUpperCase(); //小写改为大写
                if (method == "POST") {
                    header = {
                        'content-type': "application/x-www-form-urlencoded"
                    };
                } else {
                    header = {
                        'content-type': "application/json"
                    };
                }
            }
    
            //加载圈
            if (!hideLoading) {
                uni.showLoading({
                    title: '加载中...'
                });
            }
    
            // 返回promise
            return new Promise((resolve, reject) => {
                // 请求
                uni.request({
                    url: requestUrl,
                    data: data,
                    method: method,
                    header: header,
                    success: (res) => {
                        // 判断 请求api 格式是否正确
                        if (res.statusCode && res.statusCode != 200) {
                            uni.showToast({
                                title: "api错误" + res.errMsg,
                                icon: 'none'
                            });
                            return;
                        }
                        // 将结果抛出
                        resolve(res.data)
                    },
                    //请求失败
                    fail: (e) => {
                        uni.showToast({
                            title: "" + e.data.msg,
                            icon: 'none'
                        });
                        resolve(e.data);
                    },
                    //请求完成
                    complete() {
                        //隐藏加载
                        if (!hideLoading) {
                            uni.hideLoading();
                        }
                        resolve();
                        return;
                    }
                })
            })
        }
    }
    

    3.在common 中分别创建 operate.js

    1.operate.js 用来放置请求接口 api 地址

    export default {
        //接口
        api: "http://192.168.208.126:8080",
    }
    

    根据小程序环境 切换接口地址

    export default {
    	//接口
    	api: function() {
    	    let version = wx.getAccountInfoSync().miniProgram.envVersion;
    	    switch (version) {
    		case "develop": //开发预览版
    			return "https://www.baidu.com/"
    			break;
    		case 'trial': //体验版
    			return "https://www.baidu.com/"
    			break;
    		case 'release': //正式版
    			return "https://www.baidu.com/"
    			break;
    		default: //未知,默认调用正式版
    			return "http://www.baidu.com/"
    			break;
    	}
    }
    

    4.使用方法一(全局请求)

    在跟目录创建api文件夹:在创建api.js

    api.js 是用来调用我们封装好的 uni.request ,并且统一管理请求接口,在后续开发中只需要在页面中调用 api.js中请求即可

    import Request from '@/utils/requset.js'
    let request = new Request().http
    
    //全局定义请求头
    export default {
        // 请求样式
        classifyLeft: function(data) {
            return request({
                url: "/category/list", //请求头
                method: "GET", //请求方式
                data: data, //请求数据
            })
        },
    }
    /*
    请求样式:
        自定义名字: function(data) {
            return request({
                url: "/banner", //请求头
                method: "GET", //请求方式 
                data: data,    //请求数据
                token: token, // 可传  
                hideLoading: false, //加载样式
            })
        },
    */
    

    api.js的调用可以在main.js 中进行全局调用,也可以在需要的页面中调用,可根据实际情况来决定是否全局 调用。下面只介绍全局调用

    在mian.js中导入api.js

    1. 在main.js 中引入api.js
            import api from '@/common/api.js'
            Vue.prototype.$api = api
    2. 在页面中调用
            //不传参数
            this.$api.sendRequest().then((res) => {
                console.log(res);
            })
            //传参
            this.$api.sendRequest({参数}).then((res) => {
                console.log(res);
            })
    

    5.使用方法二(页面单独引入)

    user.js 是用来调用我们封装好的 uni.request ,并且统一管理请求接口,在后续开发中只需要在页面中调用 user.js中请求即可

    import Request from '@/utils/requset.js'
    import operate from '@/common/operate.js'
    let request = new Request().http
    
    // 按需引入的 请求头
    export const getUserInfo= function(data) {    
        return request({
    	url: "order/user ",		
            method: "POST",
    	data: data,
    	token: operate.isToken()
        })
    }
    

    页面中使用

    //引入
    import {
        getUserInfo
    } from '@/api/user.js'
    
    //放入生命周期
    init() {
        //用户信息
        getUserInfo().then((res) => {
    	console.log(res);
        })
    },
    

    接口的封装参考:https://juejin.cn/post/7023983465892675614

    展开全文
  • 本文介绍了如何在Atlassian Jira中编写JavaScript代码以调用外部REST API并将JSON数据加载到Jira自定义字段中
  • fetch('、api', { method: "GET", // body: JSON.stringify({timestamp: 'hello world.'}), /* headers: { "Content-Type": "application/json" },*/ // credentials: "same-origin" //需要使用cookies }).then...

    直接上代码:

    fetch('/api', {
        method: "GET",
        // body: JSON.stringify({timestamp: 'hello world.'}),
    /*    headers: {
            "Content-Type": "application/json"
        },*/
        // credentials: "same-origin" //需要使用cookies
    }).then(function(response) {
        return response.text();
    }).then(function (res) {
        console.log(res);
    }).catch(function (error) {
        console.log(error);
    });
    
    展开全文
  • 然后下载相应的api npm i axios router 首先配置 App.vue <script setup> </script> <template> <router-view></router-view> </template> <style> </style>...

    首先新建一个项目

    yarn create vite vue3-template --template vue
    

    然后下载相应的api

    npm i axios router
    

    首先配置
    App.vue

    <script setup>
    
    </script>
    
    <template>
      <router-view></router-view>
    </template>
    
    <style>
    
    </style>
    
    

    main.js

    import { createApp } from 'vue'
    import App from './App.vue'
    import router from './router'
    createApp(App).use(router).mount('#app')
    

    封装axios src/utils/request.js

    import axios from 'axios'
    const instance = axios.create({
        baseURL:"https://cnodejs.org/api/v1"
    })
    export default instance
    

    在src/api/topics.js 中请求

    import axios from '../utils/request';
    
    //请求列表的函数
    export const getTopics = (params) => axios("/topics",{params})
    
    //根据id获取详情
    export const getTopic = (id,params) => axios.get(`/topic/${id}`,{params})
    

    新建hooks src/componsables/useTopics.js

    import { ref,onMounted } from 'vue'
    import { getTopics } from '../api/topics'
    export default function useTopics(){
    
        /**
     * 数据渲染功能
     */
    //声明 数据
    const topics = ref([])
    
    //请求数据
    onMounted(async () => {
        const res =await getTopics()
        topics.value = res.data.data
    })
    return {
        topics
    }
    
    }
    

    新建hooks src/componsables/useTopic.js

    
    import { useRouter } from 'vue-router'
    export default function useTopics(){
      //跳转
    const router = useRouter()
    const go = (id) =>{
        router.push("/detail?id=" + id)
    }
    return {
        go
    }
    }
    

    在 src 下 新建 /views/Index.vue

    <template>
      <div>
          <ul>
              <li v-for="topic in topics" :key="topic.id" @click="go(topic.id)">
               {{topic.title}}
              </li>
          </ul>
      </div>
    </template>
    
    <script setup>
    // import { onMounted,ref} from 'vue';
    // import { getTopics } from '../api/topics'
    // import { useRouter } from 'vue-router'
    // /**
    //  * 数据渲染功能
    //  */
    // //声明 数据
    // const topics = ref([])
    
    // //请求数据
    // onMounted(async () => {
    //     const res =await getTopics()
    //     topics.value = res.data.data
    // })
    
    //数据渲染
    import useTopics from '../componsables/useTopics'
    const { topics } = useTopics();
    
    //跳转
    // const router = useRouter()
    // const go = (id) =>{
    //     router.push("/detail?id=" + id)
    // }
    
    //跳转
    import useTopic from '../componsables/useTopic'
    const { go } = useTopic();
    </script>
    
    <style>
    
    </style>
    

    在 src 下 新建 /views/Detail.vue

    <template>
       <div>
         {{topic.title}}
         
         <!-- ?表示如果后续的属性不存在了 就不获取了 -->
         {{topic.author?.loginname}}
    
         {{topic.create_at}}
       </div>
    </template>
    
    <script setup>
     import { ref, onMounted } from 'vue';
     import { useRoute } from 'vue-router';
     import { getTopic } from '../api/topics';
     
     let topic = ref({})
    
     const route = useRoute()
    
     //获取id
     const { id } = route.query
    
     //拿着id进行数据的请求
     onMounted( async () => {
         const res = await getTopic(id)
         topic.value = res.data.data
     })
    
    </script>
    
    <style>
    
    </style>
    

    在src 下 新建 router/index.js

    import { createWebHashHistory ,createRouter} from "vue-router"
    
    import Index from '../views/Index.vue'
    const routes = [
         {
             path:'/',
             component:Index
         },
         {
             path:'/detail',
             component:()=> import('../views/Detail.vue')
         },
         {
             path:"/store",
             component:()=> import('../views/Store.vue')
         }
    
    
    ]
     const router = createRouter({
        history:createWebHashHistory(),
        routes
    })
    export default router
    

    即可实现数据的渲染以及跳转功能

    展开全文
  • 前端调用Api接口常用的请求方式

    千次阅读 2022-03-28 17:34:02
    multipart/form-data(多用于表单),text/xml contentType: "application/json" }) 二、使用axios请求 这是基于vue中使用的,基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用。 this.$axios({ ...
  • angularjs调用api接口

    千次阅读 2020-12-19 19:15:07
    使用mock数据具有以下诸多的好处: * 如果你并不是接口api的开发者,使用mock数据你就不用等待接口api设计完成就可以开始本地开发 * 如果你自己开发接口的ap... 文章 祁幽小贵 2016-06-29 4678浏览量 基于Angular...
  • 这里我想用第二行的{confirm的107793},还有后面{heal的98765}等数据js该怎样调用呢? js代码如下: 求求了,很急!
  • 前端调用api接口方法总结

    千次阅读 2021-03-16 19:34:18
    特点: (1)在浏览器中发送 XMLHttpRequests 请求 (2)在 node.js 中发送 http请求 (3)支持 Promise API (4)拦截请求和响应 (5)转换请求和响应数据 (6)取消请求 (7)自动转换为JSON数据 (8)客户端支持...
  • 小程序ECharts使用接口调入数据 首先附上js文件链接:axios.js 提取码:AxIo 将此放到小程序目录下的utils文件夹下 在已经完成图表的js文件中完成以下修改: ①引用axios.js const axios = require('../../utils/...
  • JS调用百度api接口——实现简单的百度页面 效果: 实现: css文件: @charset "utf-8"; /* CSS Document */ *{ margin: 0; padding: 0; list-style: none; } .ss{ border: 1px solid #000000; ...
  • 微信小程序:调用API接口

    千次阅读 2021-09-11 10:03:00
    首先去果创云之类的API调用的网站找到你想调用API 以大学查询接口为例 复制API接口,然后要现在第一个?前面加上appkey,然后name可以换成变量,最后的10是显示的条数,也可以改。 最后效果是可以查询...
  • 7,vue利用axios调用后台api接口

    千次阅读 2021-11-07 10:30:13
    通常我们的vue项目是前后分离的,vue前端通过后台api提供的接口(url)操作数据库,这里我们通过axios来实现。 我们后台有这样一个接口:http://localhost:8081/api/projectInfo/GetAll,它的作用是获取projectInfo表...
  • 原生js调用外部api

    2022-01-13 20:30:39
    JSONPlaceholder - Free Fake REST API
  • jquery ajax方式获取天气预报接口数据, 解压就可以用, 包含图片资源文件, 样式比较漂亮, 下载看看吧
  • 前言: 部分qq音乐的api接口不能直接通过jsonp访问,需要通过官方的代理才能获取,如:歌词,推荐歌单等 1. webpack.dev.conf.js中创建接口: // 开头调用: var express = require('express') var axios = require('axios...
  • 拿到api接口,首先得看到接口给我们返回的是什么格式的数据 一般来说都是json格式,数组格式,或者字符串格式 这就需要相应的方法进行数据处理。把数据处理成为我们想要的格式 var xmlhttp=new XMLHttpRequest();...
  • 微信小程序调用api接口实例

    万次阅读 多人点赞 2020-11-25 17:55:12
    页面效果: ... ...2、然后回到开发者工具中,找到详情=》项目配置,进行刷新或者重新编译 ...3、在index.wxml页面中写一个button: ...4、在index.js文件中写入方法: text:function(){ var that = this; wx.requ...
  • 今天小编就为大家分享一篇ajax请求后台接口数据与返回值处理js的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Html调用分布式http API接口方法1.前言:Html调用分布式http API接口方法。很多开发者在开发html同时使用js的时候总是碰到跨域的问题,笔者使用IFRAME标签比较土的方法来解决这个问题。2.问题和目的:问题:在一个...
  • 金蝶云星空WebAPI接口文档4.0版本 用于金蝶Cloud产品的接口开发调用 cloud和k3 wise还是有很大区别的,希望能帮到大家
  • 首先建一个项目 (vite构建) ...新建utils/request.js import axios from 'axios' const instance = axios.create({ baseURL:"https://cnodejs.org/api/v1" }) export default instance 新建 src
  • 实现调用API接口

    千次阅读 2019-11-08 20:35:40
    PS:该文章内容来自于阿里云大学课程之[实现调用API接口],欢迎小伙伴们一起学习哦~ 文章目录API简介API的概念API的特点API的分类API的请求与认证API请求方式请求头与请求体状态码-成功状态状态码-服务...
  • 微信小程序配置接口调用API

    千次阅读 2021-06-16 12:19:34
    本文介绍小程序调用接口的封装,并通过koa2写个测试接口调用
  • 调用http接口的例子

    2018-12-05 20:13:23
    你这个问题,实质就是如何解析返回的JSON数据的问题。 具体如何解析,还要根据你的实际情况,比如你是否用了JQ?如果有,JQ有提供的解析方法。 没有用JQ,也有不同的方法,比如用字串函数(或辅以正则表达式)去提取...
  • v1.2:添加的咪咕,酷我,QQ的热搜参数,添加pc和web ,更正了文档的已知错误,修改了咪咕和酷我的排行榜数据内容格式,以前使用本API的请注意 用户须知 !>考虑到性能问题,可以使用专门的服务器
  • Nuxt.js 异步获取api接口数据

    千次阅读 2020-08-25 16:40:42
    nuxt.config.js modules: [ // Doc: https://axios.nuxtjs.org/usage // '@nuxtjs/axios', // '@nuxtjs/proxy', '@nuxtjs/axios' ] index.vue <template> <div class="sp-policy"> <div>{...
  • JS实现快递鸟接口调用,完成100多家主流快递轨迹单号查询,不需要后端语言开发,DEMO实现了Md5加密,URL编码,数据签名
  • 调用接口(api)报错 前端接口调用注意事项

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 152,570
精华内容 61,028
关键字:

js如何调用api接口数据

友情链接: 4.2-DRAW_API.rar