微信小程序跳坑(一)---Post请求

本文详细介绍了如何解决微信小程序中POST请求不被后端服务器正确解析的问题,包括请求参数放置位置的不同、header配置差异及真机与模拟器之间的区别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.post请求

wx.request(OBJECT)
wx.request
发起的是 HTTPS 请求。一个微信小程序,同时只能有5个网络请求连接。
官网上描述

参数名类型必填说明
urlString开发者服务器接口地址
dataObject、String请求的参数
headerObject设置请求的 header , header 中不能设置 Referer
methodString默认为 GET,有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
successFunction收到开发者服务成功返回的回调函数,res = {data: '开发者服务器返回的内容'}
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)


微信小程序示例
wx.request({
  url: 'test.php', //仅为示例,并非真实的接口地址
  data: {
        x: '' , 
        y: ''
   }, 
  header: { 
    'content-type': 'application/json' 
  }, 
  success: function(res) { 
    console.log(res.data) 
  }
})

这种请求GET方式是ok的,header头也可以不用添加。
但是POST就有比较大的问题了。

我使用以下代码进行调试(代码一):

wx.request({
    url: ApiHost + '/?service=default.getOrderInfo',
    data: {
      'order_id': order_id
    },
    method: 'POST',
    success: function (res) {
      // console.log(res);
      if (res.data.ret == 200) {
       //something to do
      }
      else{
       //something to do
      }
    }
    fail: function (res) {
      console.log(res);
    }
  });

注意看下图,微信开发工具里面的提示:


POST 请求会将data的值放在Request Payload里面,而不是Query String Parameters里面,后端服务器如果不注意,就无法取到数据。
网上很多改法,是这样的。---- 加上header头

wx.request({
    url: ApiHost + '/?service=default.getOrderInfo',
    data: {
      //数据urlencode方式编码,变量间用&连接,再post
      'order_id='+order_id
    },
    method: 'POST',
    header:{
      'content-type':'application/x-www-form-urlencoded'
    },
    success: function (res) {
      // console.log(res);
      if (res.data.ret == 200) {
       //something to do
      }
      else{
       //something to do
      }
    }
    fail: function (res) {
      console.log(res);
    }
  });

这样修改的话,后端可以不用特别处理。
但是............

因为还是想用标准的方法做,那只有修改后端服务器啦。
我这边使用的是Phalapi框架,推荐下~~~

if(DI()->request->getHeader('content-type'))
{    
  $contentType = DI()->request->getHeader('content-type');
}
if(!empty($contentType)&&(strtolower(@$contentType) === 'application/json'))
{
    $HTTP_RAW_POST_DATA = isset($GLOBALS['HTTP_RAW_POST_DATA']) ? $GLOBALS['HTTP_RAW_POST_DATA'] : "{}";
    DI()->request = new PhalApi_Request(array_merge($_GET,json_decode($HTTP_RAW_POST_DATA, true)));
}

终于,在pc上用代码一调试通过。用上标准请求,也不用application/x-www-form-urlencoded这种模式。

不过.....用上真机调试,怎么又接收不到请求参数了。怪事。。。。。。。。。
最后通过抓包分析

真机端

POST /?service=default.getOrderInfo HTTP/1.0
Host: proxy
Connection: close
Content-Length: 43
Content-Type: application/json
Accept-Encoding: gzip, deflate
Accept: */*
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 9_3_5 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Mobile/13G36 
MicroMessenger/6.5.1 NetType/WIFI Language/zh_CN
Referer: https://servicewechat.com/###/0/page-frame.html
Accept-Language: zh-cn

{"order_id":"011T00wO0gZVR72P89tO0DFNvO0T00w0"}

pc模拟开发端
POST /?service=default.getOrderInfo HTTP/1.0
Host: proxy
Connection: close
Content-Length: 43
Origin: http://###.appservice.open.weixin.qq.com
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36 
appservice webview/100000
content-type: application/json
Accept: */*
Referer: https://servicewechat.com/####/devtools/page-frame.html
Accept-Encoding: gzip, deflate, br

{"order_id":"011T00wO0gZVR72P89tO0DFNvO0T00w0"}

最后找到区别:
Content-Type 与 content-type
模拟器默认是content-type
真机默认是Content-Type
后端服务器增加处理Content-Type 就搞定了。

作者:tototo163
链接:http://www.jianshu.com/p/f95f64b393d1
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

### 如何在微信小程序中使用 `application/x-www-form-urlencoded` 方式提交请求微信小程序开发过程中,可以通过设置 `header['content-type']` 来指定不同的数据提交方式。其中种常见的提交方式是 `application/x-www-form-urlencoded`,它表示将表单字段作为键值对编码到 URL 中并发送给服务器。 以下是具体实现方法: #### 设置 Header 参数 为了使用 `application/x-www-form-urlencoded` 提交方式,在调用 `wx.request()` 方法时需显式定义 `header` 属性,并将其值设为 `'application/x-www-form-urlencoded; charset=UTF-8'`[^4]。 #### 数据序列化处理 由于 `wx.request()` 默认不支持自动转换对象为查询字符串形式,因此需要手动将 JavaScript 对象转化为 URL 编码的字符串格式。可以借助自定义工具函数完成这操作。 下面是个完整的代码示例: ```javascript // 工具函数:用于将 JSON 对象转成 query string 格式的字符串 function objToQueryString(obj) { const params = []; for (let key in obj) { if (obj.hasOwnProperty(key)) { params.push(`${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`); } } return params.join('&'); } // 发起 POST 请求 wx.request({ url: 'https://example.com/api/submit', // 替换为目标 API 地址 method: 'POST', header: { 'content-type': 'application/x-www-form-urlencoded; charset=UTF-8' }, data: objToQueryString({ // 将数据对象转换为 URL 编码的形式 username: 'testUser', password: '123456' }), success(res) { console.log('成功响应:', res.data); }, fail(err) { console.error('失败错误:', err); } }); ``` 上述代码片段展示了如何构建个基于 `application/x-www-form-urlencoded` 的 HTTP POST 请求。注意这里的 `data` 字段被预先经过了序列化的处理过程[^2]。 --- ### 注意事项 当采用这种方式时需要注意以下几点: - **字符集声明**:确保服务端能够正确解析 UTF-8 编码的内容。 - **跨域配置**:确认后端已允许来自微信小程序域名下的 CORS 请求权限。 - **安全性考量**:对于敏感信息(如密码),建议加密后再传输;同时启用 HTTPS 协议保护通信链路安全。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值