微信小程序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://blog.youkuaiyun.com/mhmyqn/article/details/25561535/

简单说就是增加了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

微信小程序开发中,wx.request是用于后台数据交互的核心API。然而,在使用wx.request进行POST请求时,开发者可能会遇到后端无法正确解析前端发送数据的问题。这通常是因为wx.request默认发送的数据格式不是后端框架如SpringMVC所期望的“application/x-www-form-urlencoded”格式。 参考资源链接:[微信小程序wx.request后台数据交互实战与问题解析](https://wenku.csdn.net/doc/6412b541be7fbd1778d427eb?spm=1055.2569.3001.10343) 为了解决这一问题,开发者需要在wx.request的配置中明确设置请求头的'content-type'。具体操作如下: 1.wx.request的配置对象中添加一个header字段。 2. 将'content-type'的值设置为'application/x-www-form-urlencoded'。 这样设置后,数据将以标准的表单格式发送,后端框架便可以使用其默认的数据解析方法(例如SpringMVC中的req.getParameter)来正确获取前端发送的数据。 示例代码如下: ```javascript wx.request({ url: '***', // 后端接口地址 data: e.detail.value, // 需要发送的数据 method: 'POST', header: { 'content-type': 'application/x-www-form-urlencoded' }, // 明确设置请求头 success: function(res) { console.log('submitsuccess'); }, fail: function(res) { console.log('submitfail'); }, complete: function(res) { console.log('submitcomplete'); } }); ``` 通过这种方式,可以确保微信小程序后台数据交互功能正常运行,为用户提供流畅的体验。如果希望深入了解微信小程序后台数据交互的技术细节更多实际问题的解决方案,建议阅读《微信小程序wx.request后台数据交互实战与问题解析》。这篇文章不仅讲解了如何正确使用wx.request,还提供了多种遇到的问题及相应的解决策略,帮助开发者更好地掌握微信小程序后台交互的要点。 参考资源链接:[微信小程序wx.request后台数据交互实战与问题解析](https://wenku.csdn.net/doc/6412b541be7fbd1778d427eb?spm=1055.2569.3001.10343)
评论 24
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值