以微信小程序为例
1.后台CommentServlet
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("UTF-8"); request.setCharacterEncoding("UTF-8"); PrintWriter out=response.getWriter(); Gson gson=new Gson(); // Map<String,Object> map=new HashMap<>(); // map.put("name", "YH_Simon"); List<Admin> adminList=new ArrayList<Admin>(); Map<String, Object> map=new HashMap<String, Object>(); adminList.add(new Admin(1,"张三",20,"男","南昌")); adminList.add(new Admin(2,"李四",22,"女","天津")); adminList.add(new Admin(3,"王五",20,"女","上饶")); adminList.add(new Admin(4,"赵六",20,"男","杭州")); String jsonObject=gson.toJson(adminList); out.write(jsonObject); out.flush(); out.close(); }
2.前台 index.js
data: { adminList:[] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.getAdminList(); }, getAdminList() { let that=this; wx.request({ url: 'http://localhost:8080/Test1/CommentServlet', success(res){ // console.log(res); // that.adminList=res.data; // console.log(that.adminList); that.setData({ adminList:res.data }) } }) },
补充:因为微信小程序无table标签,可通过以下方式实现表格格式
3.index.wxml
<view style="text-align:center;color:gray;font-size:40rpx;">学生信息</view> <view class="table"> <view class="tr bg-w"> <view class="th">id</view> <view class="th">姓名</view> <view class="th ">年龄</view> <view class="th ">性别</view> <view class="th ">地址</view> </view> <block wx:for="{{adminList}}" wx:key="{{index}}"> <view class="tr bg-g" wx:if="{{index % 2 == 0}}"> <view class="td">{{item.id}}</view> <view class="td">{{item.name}}</view> <view class="td">{{item.age}}</view> <view class="td">{{item.gender}}</view> <view class="td">{{item.address}}</view> </view> <view class="tr" wx:else> <view class="td">{{item.id}}</view> <view class="td">{{item.name}}</view> <view class="td">{{item.age}}</view> <view class="td">{{item.gender}}</view> <view class="td">{{item.address}}</view> </view> </block> </view>
4.index.wxss
.table {
border: 0px solid darkgray;
}
.tr {
display: flex;
100%;
justify-content: center;
height: 3rem;
align-items: center;
}
.td {
40%;
justify-content: center;
text-align: center;
}
.bg-w{
background: snow;
}
.bg-g{
background: #E6F3F9;
}
.th {
40%;
justify-content: center;
background: #3366FF;
color: #fff;
display: flex;
height: 3rem;
align-items: center;
}