java后台组装request请求_浅析微信小程序与后台通信（含实例代码）

最近总被问到，小程序如何与后台通信？

因为小程序的代码运行在腾讯的服务器上，而我们自己编写的后台代码运行在我们自己部署的服务器上，所以刚开始接触小程序开发的人确实会对这方面有些困惑，其实，通过进一步学习会发现和我们普通的web前后端通信也没有多大的区别，下面就来简单的讲解说明一下。

小程序是通过wx.request()接口发起网络请求的，我们先来看看这个接口的官方文档说明。

wx.request(OBJECT)

发起网络请求。

OBJECT参数说明：

参数名	类型	必填	默认值	说明
url	String	是		开发者服务器接口地址
data	Object/String	否		请求的参数
header	Object	否		设置请求的 header，header 中不能设置 Referer。
method	String	否	GET	(需大写)有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataType	String	否	json	如果设为json，会尝试对返回的数据做一次 JSON.parse
success	Function	否		收到开发者服务成功返回的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数(调用成功、失败都会执行)

success返回参数说明：

参数	类型	说明	最低版本
data	Object/String	开发者服务器返回的数据
statusCode	Number	开发者服务器返回的 HTTP 状态码
header	Object	开发者服务器返回的 HTTP Response Header	1.2.0

data 数据说明：

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

对于 header['content-type'] 为 application/json 的数据，会对数据进行 JSON 序列化

对于 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换成 query string (encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...)

示例代码

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

以上是官方文档关于该接口的说明，从文档中我们知道，要与后台通信并发起请求，只需要在wx.requst()接口中传入一个对象作为参数，该参数对象含url、data、method等基本参数(具体参数含义请参照官方文档说明)，对比web开发中的Ajax会发现，两者极其相似，而实际上，两者在原理上也确实是一样的。

下面来做一个实例完整的说明一下通信过程(后台用java为例)：

基本思路

将数据通过get方式传到Java servlet类，servlet得到微信小程序的数据打印出来并返回一个数据给微信小程序，从而实现一个最简单的前后端通信。

关键代码

微信小程序代码

index.wxml

<view>  <button bindtap='bindtest'>testbutton> view>

index.js

bindtest: function(){    wx.request({    //localhost为本地服务器，且是http服务的，请在开发工具中勾选不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书      url: 'http://localhost:8080/Demo01/servlet02',      data:{        username:'001',        password:'abc'      },      method:'GET',      header: {        'content-type': 'application/json' // 默认值      },      success:function(res){        console.log(res.data);      },      fail:function(res){        console.log(".....fail.....");      }    })  }

Java serlvet类代码

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // TODO Auto-generated method stub                response.setContentType("text/html;charset=utf-8");                  /* 设置响应头允许ajax跨域访问 */          response.setHeader("Access-Control-Allow-Origin", "*");          /* 星号表示所有的异域请求都可以接受， */          response.setHeader("Access-Control-Allow-Methods", "GET,POST");                 //获取微信小程序get的参数值并打印        String username = request.getParameter("username");        String password = request.getParameter("password");        System.out.println("username="+username+" ,password="+password);                //返回值给微信小程序        Writer out = response.getWriter();         out.write("进入后台了");        out.flush();       }

效果演示

小程序开发工具控制台

ecplise控制台

至此说明微信小程序与Java后台通信成功！当然这是最简单的通信，根据实际项目的需要，可能实现的业务逻辑会比这复杂一些，但是基本原理是一致的，通过这个实例就可以举一反三了。

-完-

---

所有关注小程序的人都关注了我，分享与小程序有关的制作教程、资讯、案例及运营技巧等。

客服微信：lxwl360

---