js 调用接口并传参

JavaScript调用API接口传参数方法
这篇博客介绍了两种在JavaScript中调用API接口并传递参数的方法:query传参和param传参,特别是param传参时如何传递JSON数据。文章强调在使用前需要引入jquery.json-xx.min.js库。

注:需先引入 jquery.json-xx.min.js

1. query传参

var name = '王一';
var age = 18;
$.ajax({
    type : 'get',
    url : "xxxxxx?name="+name+"&age="+age,
    async : false,//同步/异步
    contentType : "application/x-www-form-urlencoded; charset=gbk",
    dataType : 'json', //返回 JSON 数据
        beforeSend : function() { //调用前触发,如加载效果等
        show('.load'); 
    },
    success : function(data, status) {
        var rstate = data.result;
        if (rstate == "0") {
            alert('接口调用成功!');
        } else {
            alert('接口调用失败!');
        }
    },
        complete : function() { //调用后触发(不管成功或失败)
            hide('.load);
    },
    error : function(data, status, e) {
        alert('接口调用错误!');
    }
});

2.param传参(传json数据)

var param = new Object();
param.name = '王一';
param.age = 18;
$.ajax({
    type : 'post',//也可为get
    url : 'xxxxx',
    async : false,
    contentType : "application/x-www-form-urlencoded; charset=gbk",
    data : {
        "param" : $.toJSON(param) //转换为json格式
    },
    dataType : 'json',
        beforeSend : function() { 
        show('.load'); 
    },
    success : function(data, status) {
        var rstate = data.result;
        if (rstate == "0") {
            if (rstate == "0") {
            alert('接口调用成功!');
        } else {
            alert('接口调用失败!');
        }
    },
        complete : function() { 
            hide('.load);
    },
    error : function(data, status, e) {
        alert('接口调用错误!');
    }
});

 

转载于:https://www.cnblogs.com/linjiangxian/p/11465911.html

<think>嗯,用户想知道如何在微信原生小程序中调用接口传递数。首先,我需要回忆一下微信小程序的API结构和传参方法。根据之前学过的知识,微信小程序的路由跳转和传参主要有几种方式,比如wx.navigateTo、wx.redirectTo等,这些方法可以通过URL的query数传递数据。另外,还有事件通道eventChannel,可以在跳转时传递更复杂的数据。 用户需要的是具体的示例教程,所以我应该分步骤讲解,从基本的页面跳转传参到使用事件通道,再到在生命周期函数中获取数。同时,要注意引用相关的考资料,比如引用中的路由跳转和传参方法,以及eventChannel的使用。 首先,使用wx.navigateTo进行页面跳转时,可以在URL中添加数,然后在目标页面的onLoad生命周期函数中通过options对象获取这些数。这部分内容在引用[1]和引用[3]中提到过,需要正确引用。 下来,事件通道的方法在引用[2]中有说明,可以在success回调中通过eventChannel传递数。这里需要给出示例代码,展示如何在跳转时发布事件,在目标页面监听。 另外,用户可能还想知道如何在非跳转场景下传参,比如调用云函数或者后端API。这时候,数可以放在data字段中,或者作为请求的数传递。这部分需要简要提及,但主要焦点还是在页面间的传参。 还需要注意不同传参方式的优缺点,比如URL传参适合简单数据,而eventChannel适合复杂数据,这点在引用[4]中提到了,应该在总结部分说明。 最后,生成相关问题,帮助用户进一步学习,比如性能优化、不同传参方式的区别,以及数安全性的问题。这些问题应该基于用户可能遇到的后续疑问来设计。 现在整理步骤,确保每个部分都有代码示例,且引用正确的资料。检查是否有遗漏的传参方式,比如全局变量或本地存储,但根据用户的问题,可能更关注API调用时的传参,所以可以暂时不深入讨论这些方法,除非必要。 总结下来,回答应该包括三种传参方式:URL数、事件通道、API请求数,每种方式都附上代码示例和引用来源,最后给出相关问题和总结注意事项。</think>### 微信小程序调用API传参示例教程 微信小程序中调用接口传递数主要通过路由跳转传参、事件通道传参、API请求传参三种方式实现。以下是具体实现方法和代码示例: --- #### 一、路由跳转传参(URL数传递) 适用于简单数据传递,通过`wx.navigateTo`等路由方法在URL中附加数。 ```javascript // 页面A跳转传参 wx.navigateTo({ url: '/pages/targetPage/targetPage?id=123&name=test' // URL拼数 }) // 目标页面(targetPage.js数 Page({ onLoad(options) { console.log(options.id); // 输出123 console.log(options.name); // 输出test } }) ``` > **特点**:数会暴露在URL中,适合传递少量简单数据[^1][^3]。 --- #### 二、事件通道传参(复杂数据传递) 通过`eventChannel`实现跨页面通信,适合传递对象或复杂数据。 ```javascript // 页面A跳转建立事件通道 wx.navigateTo({ url: '/pages/targetPage/targetPage', success(res) { res.eventChannel.emit('sendData', { list: [1,2,3], userInfo: {name: 'John'} }) } }) // 目标页面监听事件通道 Page({ onLoad(options) { const eventChannel = this.getOpenerEventChannel() eventChannel.on('sendData', (data) => { console.log(data.list); // 输出[1,2,3] }) } }) ``` > **特点**:支持传递对象/数组等复杂数据类型,数据不暴露在URL中[^2][^4]。 --- #### 三、API请求传参调用后端接口) 通过`wx.request`向服务器传递数,支持GET/POST方式。 ```javascript // GET请求传参 wx.request({ url: 'https://api.example.com/data', data: { // 数放在data字段 page: 1, size: 10 }, success(res) { console.log(res.data) } }) // POST请求传参 wx.request({ url: 'https://api.example.com/submit', method: 'POST', data: { username: 'admin', content: 'Hello' }, header: {'Content-Type': 'application/json'}, success(res) { console.log(res.statusCode) } }) ``` --- #### 注意事项 1. **URL传参**需注意长度限制(微信限制URL长度不超过2KB) 2. **敏感数据**建议通过HTTPS加密传输或使用`wx.setStorageSync`临时存储 3. 对象类型数需先序列化(如`JSON.stringify`) ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值