微信小程序与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项目，需在微信项目开发工具项目设置里勾选不校验合法域名。。。选项