微信小程序與java后臺數據交互

先到 官網 申請賬號和下載 微信開發工具。

進入微信開發工具,index.wxml關鍵代碼入下：

  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
  <view>
    <button bindtap='change'>變更</button>
  </view>

index.js關鍵代碼如下：
get提交方式：

change: function () {
    var that = this;
    wx.request({
      url: 'http://localhost:8080/myTest/wxxcx/wxlogin.do',
      method: 'get',
      data: { pass: 'text', name: '測試11' },
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        that.setData({
          motto: res.data[0].name
        });
      },
      fail: function (err) {
        console.log("sssssssssssss" + err.data);
      }
    })
  },

post提交方式：

change: function(){
    var that = this;
    wx.request({
      url: 'http://localhost:8080/myTest/wxxcx/wxlogin.do',
      method:'post',
      data:{pass:'text',name:'測試11'},
      header: {
        'content-type': 'application/x-www-form-urlencoded' //post提交方式這里json需改成這個x-www-form-urlencoded，否則后臺接收不到數據，原因參考：http://blog.csdn.net/mhmyqn/article/details/25561535/
      },
      success: function(res){
        that.setData({
          motto: res.data[0].name
        });
      },
      fail:function(err){
       console.log("sssssssssssss"+err.data);
      }
    })
  }

java后臺關鍵代碼：

@RequestMapping(value = "wxlogin.do")
    public String wxlogin(String name,HttpSession session, HttpServletRequest req, HttpServletResponse resp, Model model) {
        resp.setContentType("text/json");
        resp.setCharacterEncoding("utf-8");
        String pass = (String) req.getParameter("pass");
        log.info("pass==" + pass + ",name=" + name);
        PrintWriter pw = null;
        Map map = new HashMap();
        map.put("pass", pass);
        map.put("status", "進入后臺了");
        map.put("name", name);
        JSONArray json = JSONArray.fromObject(map);
        try {
            pw = resp.getWriter();
            pw.print(json);
        } catch (IOException e) {
            log.info(e);
            log.error(e);
            e.printStackTrace();
        } finally {
            if (pw != null)
                pw.close();
        }
        return null;
    }

定義了個內容變更按鈕
調試界面如下：

單擊變更內容后，java后臺輸出：

微信開發工具調試界面

數據交互成功：
需要注意一點，微信開發工具wx.request要調用本地localhost項目，需在微信項目開發工具項目設置里勾選不校驗合法域名。。。選項