这是我个人探究微信小程序前端与后端之间的数据交换的过程，再结合个人所学的SSH框架，
编程工具用myEclipse2014工具。当然，前提是后台的项目要部署到tomcat服务器上才行，
然后总结了从后台获取数据和从前端读取数据存放到数据库的两个过程，
大家可以参考、学习一下，看代码：
首先，在微信小程序的界面中，先设两个按钮：如下图所示：
代码如下：
<button bindtap=\'houduanButton1\'>点击发起请求</button> <view wx:for="{{list}}"> 姓名：{{item}} </view> <button bindtap=\'houduanButton2\'>提交请求</button>
然后，在js文件中编写houduanButton1和houduanButton2这个按钮事件，代码如下：
Page({ data: { list: \'\' }, houduanButton1: function () { var that = this; wx.request({ //这个url是指在eclipse中com.international.action文件下的abroadCollegeAction类的方法getUser() //类似于ajax的url调用action的方式 url: \'http://localhost:8080/Graduate/com/international/action/abroadCollegeAction!getUser\', method: \'post\', //请求的的方式，有post和get两种方式 header: { \'content-type\': \'application/json\' // 把数据转换为json类型数据默认值 }, success: function (res) { var list = res.data.list; //获取从eclipse中返回的map("list",list)数据 console.log(res.data) if (list == null) { var toastText = \'数据获取失败\'; wx.showToast({ //如果获取的数据是null，就会提示获取数据失败 title: toastText, icon: \'success\', duration: 2000 }); } else { that.setData({ //把获取到的值赋值给list list: list }) } } }) }, houduanButton2: function () { var that =this; console.log("提交的list：" + that.data.list)//打印到控制台 wx.request({ //这个url是指在eclipse中com.international.action文件下的abroadCollegeAction类的方法getUser() //类似于ajax的url调用action的方式 url: \'http://localhost:8080/Graduate/com/international/action/abroadCollegeAction!getUsers\', data: { listUser: that.data.list }, //传递数据给eclipse中com.international.action文件下的
//abroadCollegeAction类的数列listUser method: \'post\', //请求的的方式，有post和get两种方式 header:{ \'content-type\': \'application/x-www-form-urlencoded\' //传数据给后台的时候是必加的,不然传递给后端的值为null }, success: function(res){ var message = res.data; wx.showToast({ title:\'提交成功\', icon: \'success\', duration:2000 }); } }) } });
然后回到eclipse中，在com.international.action文件下的abroadCollegeAction类中新建两个方法getUser()和getUsers(),这里并没有连接数据库，因为我本人觉得，如果可以获取到数据，
那么从数据库中提取数据就是很简单的事情了，所有就新建了一个list来存放数据，代码如下
package com.international.action; import java.io.IOException; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.http.HttpServletRequest; import org.apache.struts2.ServletActionContext; import com.international.model.abroadCollege; import com.international.model.internationalClass; import com.international.service.abroadCollegeService; import com.international.service.pagingService; import com.international.service.studentService; import com.opensymphony.xwork2.ActionContext; import com.opensymphony.xwork2.ActionSupport; public class abroadCollegeAction extends ActionSupport { List<String> listUser; //测试微信小程序的list public List<String> getListUser() { return listUser; } public void setListUser(List<String> listUser) { this.listUser = listUser; } public void getUser() throws IOException{ System.out.println("微信小程序正在调用。。。"); Map<String, Object> map = new HashMap<String, Object>(); List<String> list = new ArrayList<String>(); list.add("zhangsan"); list.add("lisi"); list.add("wanger"); list.add("mazi"); map.put("list",list); System.out.println("微信小程序调用完成。。。"); try { ajaxAction.toJson(ServletActionContext.getResponse(),map); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } } public void getUsers() throws IOException{ System.out.println("提交的数据是："+listUser); String message="提交成功"; ajaxAction.toJson(ServletActionContext.getResponse(),message); } }
接下来，也就是最重要的一步，就是把list里的数据转换为json数据，微信小程序才能够获取到，否则微信小程序获取到的数据为空，代码如下：
我自己把转换为json数据的逻辑写成一个类，封装起来，方便调用，希望也能方便大家.
package com.international.action; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.http.HttpServletResponse; import com.google.gson.Gson; import com.international.model.internationalStudent; public class ajaxAction { public static void toJson(HttpServletResponse response, Object data) throws IOException { Gson gson = new Gson(); String result = gson.toJson(data); response.setContentType("text/json; charset=utf-8"); response.setHeader("Cache-Control", "no-cache"); //取消浏览器缓存 PrintWriter out = response.getWriter(); out.print(result); out.flush(); out.close(); } }
这就大功告成了，如果有不足之处，希望大家多包涵。
请发表评论