微信小程序wx.request实现后台数据交互功能分析

本文实例讲述了微信小程序wx.request实现后台数据交互功能。分享给大家供大家参考，具体如下：

记录微信小程序wx.request这个api在跟后台交互时遇上的问题。

1、根据资料，完成第一步，请求发送，代码如下：

wx.request({
     url: 'https://localhost:8443/xiaochengxu/addBill.do',
     data: e.detail.value,
     method: 'POST',
     success:function(res) {
       console.log('submit success');
     },
     fail:function(res){
       console.log('submit fail');
     },
     complete:function(res){
       console.log('submit complete');
     }
})

后台成功接收到请求，控制台也打印了submit success和submit complete，但是，后台请求并未接收到数据，打开调试，发现数据都在request payload中，所以后台无论是springmvc的映射bean还是req.getParameter都拿不到参数。

解决方法参考本站：http://www.jb51.net/article/129039.htm

简单说就是增加了header: {'content-type': 'application/x-www-form-urlencoded'},后台成功获取数据。

至此，代码如下：

wx.request({
     url: 'https://localhost:8443/xiaochengxu/addBill.do',
     data: e.detail.value,
     method: 'POST',
     header: {'content-type': 'application/x-www-form-urlencoded'},
     success:function(res) {
       console.log('submit success');
     },
     fail:function(res){
       console.log('submit fail');
     },
     complete:function(res){
       console.log('submit complete');
     }
})

2、接收请求返回数据

这一步问题不大，我是按照json格式返回的，只是按照官网写的console.log(res.data)的话，会在控制台打印Object，带上参数名就好了，比如res.data.code

希望本文所述对大家微信小程序开发有所帮助。

赞 (0)

相关推荐

  • 微信小程序 wx.request(接口调用方式)详解及实例

    微信小程序 wx.request(接口调用方式)详解及实例

    微信小程序 wx.request----接口调用方式 最近开发了一个微信小程序版的任务管理系统,在向Java后台发送接口时遇到了一些问题,在这里做一个简单的总结. 官方接口 官方给出的接口叫做wx.request,请求方式比较简单,下面是官网给出的请求实例. wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' },

  • 微信小程序 wx.request(object) API详解及实例代码

    微信小程序 wx.request(object) API详解及实例代码

    这里通过干活集中营的API接口真实请求下数据.如果提示URL 域名不合法,请在 mp 后台配置后重试修改asdebug.js两行代码即可可看下面图 定位到asdebug.js文件 打开搜索关键字URL 域名不合法关键字就是提示错误信息注释两行代码 主要方法: wxml <block wx:for-items="{{result}}"> <view style="width:100%; height: 50rpx"></view>

  • 微信小程序 wx.request方法的异步封装实例详解

    wx-promise-request 是对微信小程序 wx.request 方法的异步封装. 解决问题 支持 Promise (使用 es6-promise 库). 管理请求队列,解决 request 最大并发数超过 10 会报错的问题. 下载 npm install wx-promise-request 然后拷贝 dist/index.js 文件到你的小程序项目中. 使用 import {request} from './wx-promise-request'; request({ url:

  • 微信小程序 wx.request(OBJECT)发起请求详解

    微信应用号小程序发起请求wx.request(OBJECT) wx.request(OBJECT) ? wx.request发起的是https请求.一个微信小程序,同时只能有5个网络请求连接. 参数名 类型 必填 说明 url String 是 开发者服务器接口地址 data Object.String 否 请求的参数 header Object 否 设置请求的header , header中不能设置Referer method String 否 默认为GET,有效值:OPTIONS,GET,H

  • 详解微信小程序开发之——wx.showToast(OBJECT)的使用

    详解微信小程序开发之——wx.showToast(OBJECT)的使用

    wx.showToast API是显示消息提示框的作用. 先让我们看一下官方的文档说明: 注意:其中的图标,只支持"success"."loading" 示例代码: wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) 接下来演示如何使用,先打开微信web开发者工具,新建快速项目,删除掉首页没用的内容,保留如下部分. 添加两个按钮,同事添加点击事件.再在按钮上添加navigator导航,链接到默

  • 微信小程序 wx.request合法域名配置详解

    微信小程序 wx.request合法域名配置详解

    微信小程序  wx.request合法域名配置 加上了appid,麻烦事就来了. 问题:xxx不在以下合法域名列表中 ,请参考文档 解决方法:去微信公众平台配置域名. 注意: 1.一个月申请修改的次数3次,且行且珍惜.我这个月只有一次机会了. 2.必须是HTTPS. HTTPS  SSL证书 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • 微信小程序网络请求wx.request详解及实例

    微信小程序网络请求wx.request详解及实例 如果说小程序API里面最重要一个接口是哪一个?那么首推wx.request().相当于在小程序内请发起一个https请求(本地调试模式下支持HTTP).HTTP协议中共定义了八种方法或者叫"动作"来表明对Request-URI指定的资源的不同操作方式. GET:向特定的资源发出请求. POST:向指定资源提交数据进行处理请求.数据被包含在请求体中. PUT:向指定资源位置上传其最新内容. DELETE:请求服务器删除Request-UR

  • 微信小程序 wx.login解密出现乱码的问题解决办法

    微信小程序 wx.login解密出现乱码的问题解决办法

    微信小程序 wx.login解密出现乱码的问题解决办法 最近在给公司开发微信小程序,需要用到微信登录,根据文档要求需要把获取的用户信息按照AES进行解密. 我使用的是官方提供的PHP demo,拷贝到程序中,测试发现,解密之后的数据前面有一串乱码. 类似于这样子的,前面一段是乱码. 经过仔细的检查,发现官方的提供的demo中的帐号和机密之后的信息是可以解密的,这就说明解密代码是没有问题的. 后来查询微信开发者社区,找到好多解密失败.其中一个回答说是因为多次调用wx.login之后导致的问题. 终

  • 微信小程序 wx.uploadFile无法上传解决办法

    微信小程序 wx.uploadFile无法上传解决办法

    微信小程序 wx.uploadFile无法上传解决办法 微信安卓客户端无法使用wx.uploadFile上传文件的问题有不少开发者都遇到. 我也因为一直不能解决,硬着头皮提交审核最后被拒(抱着审核者最好用iOS检测的心态,不巧审核我应用的用的是安卓),才尝试使用第三方的手段解决. 最终我是用了七牛第三方存储的方式,将文件直接上传至七牛的储存的空间上再回调使用. 当然像又拍云,万象优图这些第三方存储源都可以采用这种思路. 首先是将七牛的https上传域名放进小程序的域名名单中. 这里我使用的是七牛

  • 微信小程序wx.request实现后台数据交互功能分析

    本文实例讲述了微信小程序wx.request实现后台数据交互功能.分享给大家供大家参考,具体如下: 记录微信小程序wx.request这个api在跟后台交互时遇上的问题. 1.根据资料,完成第一步,请求发送,代码如下: wx.request({ url: 'https://localhost:8443/xiaochengxu/addBill.do', data: e.detail.value, method: 'POST', success:function(res) { console.log

  • 微信小程序wx.request使用POST请求时后端无法获取数据解决办法

    微信小程序wx.request使用POST请求时后端无法获取数据解决办法

    遇到的坑: 例如在写微信小程序接口时,method请求方式有POST和GET两种,为了数据安全,我们会偏向于使用POST请求方式访问服务器端: 当我们使用POST方式请求时,后端无法获取到传送的参数,但使用GET方式却是可以的. 解决办法: 设置请求的 header头: header: { "Content-Type": "application/x-www-form-urlencoded" }, 特别注意:post请求必须写method: 'POST',因为wx.

  • 微信小程序  wx.request合法域名配置详解

    微信小程序  wx.request合法域名配置详解

    微信小程序  wx.request合法域名配置 加上了appid,麻烦事就来了. 问题:xxx不在以下合法域名列表中 ,请参考文档 解决方法:去微信公众平台配置域名. 注意: 1.一个月申请修改的次数3次,且行且珍惜.我这个月只有一次机会了. 2.必须是HTTPS. HTTPS  SSL证书 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • 微信小程序wx.request拦截器使用详解

    一. 请求后台的时候,服务端对每一个请求都会验证权限,而前端也需要对服务器返回的特殊状态码统一处理,所以可以针对业务封装请求. 首先我们通过request拦截器在每个请求头里面塞入token等信息,好让后端对请求进行权限验证.并创建一个respone拦截器,当服务端返回特殊的状态码,我们统一做处理,如未登录网络错误等操作. 二. 1.首先了解小程序官方api-wx.request() ,通过示例可以看出wx.request的参数是一个对象,拥有传输地址,传输内容,响应头,成功失败回调函数等属性和

  • 微信小程序wx.request的简单封装

    微信小程序wx.request的简单封装

    这些天团队里开始做小程序开发了,之前没做过,都是第一次,第一次的感觉大家都懂的.周末看了一下小程序项目的代码,在网络请求上发现了一些小问题,最终没忍住想了点办法把request封装了一下.下面来看看吧. 看项目代码时发现了下面几点问题: 网络请求都写在Page里,每个请求都要重复的写wx.request以及一些基础配置: 每个页面里都要处理相同类型的异常: 后端返的http status code为200以外时,并不能直接进入fail对应函数进行处理: 针对这些问题,首先在项目目录里新建了一个a

随机推荐