小程序前后台数据传递

主要思想就是后端发布成一个URL地址，前端调用即可。在微信小程序中，通过wx.request( )发起请求。

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

当请求成功后，success会接收到成功的信息，主要参数包括：

 

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

 

1、在,wxml中写一个点击事件

   <image class='img1' src='/img/待收货.png' bindtap='bindtest'></image>

2、在相应的.js中调用wx,requets方法，具体参数看上图或官方文档

 bindtest: function () {
    wx.request({
      url: 'http://localhost:8080/bindtext', //本地服务器地址
      data: {
        username: '001',
        password: 'abc',
      },
      method: 'GET',
      header: {
        'content-type': 'application/json' //默认值
      },
      success: function (res) {
        console.log(res);
      },
      fail: function (res) {
        console.log("失败");
      }
    })
  }

3、在后台control层中写方法

//小程序测试
    @GetMapping(value = "/bindtext",produces = "application/json;charset=UTF-8")
    @ResponseBody
    public Object bindtext(HttpServletRequest request, HttpServletResponse response) throws IOException {
        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 passsword = request.getParameter("password");
        System.out.println("username:" + username + "passsword:" + passsword);

        //返回值给微信小程序
//        Writer out = response.getWriter();
//        out.write("进入后台了go gogo");
//        out.flush();
  userService.findUser(1);
        Map<String, Object> map=new HashMap<String, Object>();
        map.put("fd", "郝鹏");
        map.put("dd", "郝鹏");
        return map;
    }

4、结果

{data: {…}, header: {…}, statusCode: 200, errMsg: "request:ok"}
data:
{dd: "郝鹏", fd: "郝鹏"}
errMsg:
"request:ok"
header:
{Access-Control-Allow-Origin: "*", Access-Control-Allow-Methods: "GET,POST", Content-Type: "application/json;charset=UTF-8", Transfer-Encoding: "chunked", Date: "Wed, 12 Sep 2018 08:58:58 GMT"}
statusCode:
200
__proto__:
Object

5、涉及知识点-----要传给前台json格式的数据

方法一、使用springboot的话可以直接用@ResponseBody会自动将你的key-value类型数据转换为json传给前台。

            返回格式只要是你key-value类型的数据就行

方法二、springmvc中使用@ResponseBod的话还要导入jackeson的jar包

             详情看https://www.cnblogs.com/tongxinling/p/7862198.html