使用Spring MVC与MyBatis实现用户数据管理，包括注册、分页和删除

SSH 整合时实现了简单的登录功能,这次实现简单的注册功能.
需要改动的地方下面会提到,没有提到的地方就不改动

要求

1.登录 register.jsp 页面,填入必要信息,点击注册;
2.如果成功,跳转到 success.jsp,并显示出所有的用户信息;
3.如果注册失败,则跳转到 error.jsp 页面
4.实现分页功能,实现删除功能

实现

1.新建 t_user 表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
-- ----------------------------
-- Table structure for t_user
-- ----------------------------
DROP TABLE IF EXISTS `t_user`;
CREATE TABLE `t_user` (
  `user_id` int(11) NOT NULL AUTO_INCREMENT,
  `f_name` varchar(255) DEFAULT NULL,
  `f_password` varchar(255) DEFAULT NULL,
  `f_age` int(11) DEFAULT NULL,
  `f_sex` varchar(255) DEFAULT NULL,
  `f_city` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`user_id`)
) ENGINE=InnoDB AUTO_INCREMENT=87 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of t_user
-- ----------------------------
INSERT INTO `t_user` VALUES ('14', 'rooterger', 'dus', '23', 'rth', 'jngfnm');
INSERT INTO `t_user` VALUES ('31', 'root2', 'dus010', '234', 'erh', 'tyjty');
INSERT INTO `t_user` VALUES ('32', 'er', 'du010', '23', 'rth', 'tym');
INSERT INTO `t_user` VALUES ('33', 'rootehr', 'trj', '23', 'segv', 'rtj');
INSERT INTO `t_user` VALUES ('34', 'refw', 'dus82010', '23', 'erg', 'tg');
INSERT INTO `t_user` VALUES ('45', 'ergrth', 'tyj', '2', 'tyj', 'erh');
INSERT INTO `t_user` VALUES ('53', 'ergfgnfgn', 'erg', '213', 'erg', 'gfnfg');
INSERT INTO `t_user` VALUES ('54', 'ghn', 'ghmghm', '213', 'ghm', 'fgn');
INSERT INTO `t_user` VALUES ('55', 'hj,', 'hj,', '324', 'jh,', 'rtbh');
INSERT INTO `t_user` VALUES ('56', 'erg', 'erg', '23', 'erg', 'fdbfgn');
INSERT INTO `t_user` VALUES ('74', 'tgym', 'ghm', '234', 'hgmghm', 'ghm');
INSERT INTO `t_user` VALUES ('76', 'dfbfd', 'dfb', '23', 'dfb', 'dfnb');
INSERT INTO `t_user` VALUES ('77', 'edhrtjytjk', 'hykm', '23', 'edb', 'dfb');
INSERT INTO `t_user` VALUES ('79', 'dfnb', 'fgn', '234', 'fgn', 'fn');
INSERT INTO `t_user` VALUES ('80', 'yuk', 'yukm', '32', 'db', 'fgn');
INSERT INTO `t_user` VALUES ('81', 'rthrthtrh', 'rth', '234', 'rthrt', 'rtnghm');
INSERT INTO `t_user` VALUES ('82', 'fgngffgn', 'fgnfgn', '23', 'sv', 'fgn');
INSERT INTO `t_user` VALUES ('84', 'dfbdf', 'dfnf', '32', 'gngfn', 'gfm');
INSERT INTO `t_user` VALUES ('85', 'ergergtyj', 'tyjkyk', '2', 'wefwe', 'rthntj');
INSERT INTO `t_user` VALUES ('86', 'fgnfgfgmhgm', 'hgmgh', '32', 'sdv', 'fgnghm');

2.新建 UserBean.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
package com.code.ssm.bean;
import java.io.Serializable;
public class UserBean implements Serializable{
    private static final long serialVersionUID = -6971764181923020401L;
    private int id;
    private String username;
    private String password;
    private int age;
    private String sex;
    private String city;
    public UserBean() {}
    public UserBean(String username, String password, int age, String sex, String city) {
        this.username = username;
        this.password = password;
        this.age = age;
        this.sex = sex;
        this.city = city;
    }
    public int getId() {return id;}
    public void setId(int id) {this.id = id;}
    public String getUsername() {return username;}
    public void setUsername(String username) {this.username = username;}
    public String getPassword() {return password;}
    public void setPassword(String password) {this.password = password;}
    public int getAge() {return age;}
    public void setAge(int age) {this.age = age;}
    public String getSex() { return sex;}
    public void setSex(String sex) {this.sex = sex;}
    public String getCity() {return city;}
    public void setCity(String city) {this.city = city;}

    @Override
    public String toString() {
        return "UserBean{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", age=" + age +
                ", sex='" + sex + '\'' +
                ", city='" + city + '\'' +
                '}';
    }
}

3.新建 UserMapper.java

1
2
3
4
5
6
7
8
9
10
11
12
13
package com.code.ssm.mapper;
import com.code.ssm.bean.UserBean;
import org.apache.ibatis.annotations.Param;
import java.util.List;
public interface UserMapper {
    List<UserBean> getUserByName(@Param("username")String username);
    int addUser(UserBean userBean);
    List<UserBean> getAllUsers();
    //分页实现
    List<UserBean> getAllUsersLimit(@Param("pageNow")int pageNow,@Param("pageSize")int pageSize);
    int getCounts();
    int delUser(@Param("id") int id);
}

4.新建 UserMapper.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org/DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.code.ssm.mapper.UserMapper">

    <!-- 结果映射 -->
    <resultMap id="userMap" type="UserBean" >
        <id property="id" column="user_id" javaType="int"/>
        <result property="username" column="f_name" javaType="java.lang.String"/>
        <result property="password" column="f_password" javaType="java.lang.String"/>
        <result property="age" column="f_age" javaType="int"/>
        <result property="sex" column="f_sex" javaType="java.lang.String"/>
        <result property="city" column="f_city" javaType="java.lang.String"/>
    </resultMap>

    <insert id="addUser">
        insert into t_user(f_name,f_password,f_age,f_sex,f_city) values(#{username},#{password},#{age},#{sex},#{city})
    </insert>
    <delete id="delUser">
        delete from t_user where user_id=#{id}
    </delete>
    <select id="getUserByName" resultType="com.code.ssm.bean.UserBean">
        select * from t_user where f_name=#{username}
    </select>
    <select id="getAllUsers" resultMap="userMap">
        select * from t_user
    </select>
    <select id="getAllUsersLimit" resultMap="userMap">
        select * from t_user limit #{pageNow},#{pageSize}
    </select>
    <select id="getCounts" resultType="java.lang.Integer">
        select count(*) from t_user
    </select>
</mapper>

5.UserService.java

1
2
3
4
5
6
7
8
9
package com.code.ssm.service;
import com.code.ssm.bean.UserBean;
import java.util.List;
public interface UserService {
    public boolean register(UserBean userBean);
    public List<UserBean> getAllUsers(int pageNow, int pageSize);
    public boolean delUser(int id);
    int getCounts();
}

6.UserServiceImp.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
package com.code.ssm.service.imp;

import com.code.ssm.bean.UserBean;
import com.code.ssm.mapper.UserMapper;
import com.code.ssm.service.UserService;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;

@Service("userService")
public class UserServiceImp implements UserService {
    @Resource
    private UserMapper userMapper;
    @Override
    public boolean register(UserBean userBean) {
        if(userMapper.getUserByName(userBean.getUsername()).size() == 0){
            userMapper.addUser(userBean);
            return true;
        }else return false;
    }
    @Override
    public List<UserBean> getAllUsers(int pageNow,int pageSize) {
        int a = (pageNow - 1) * pageSize;
        return userMapper.getAllUsersLimit(a,pageSize);
    }
    @Override
    public boolean delUser(int id) {
        return 1 == userMapper.delUser(id);
    }
    @Override
    public int getCounts() {
        return userMapper.getCounts();
    }
}

7.导入 jQuery+bootstrap 包
8.新建 register.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<%@ page contentType = "text/html;charset=UTF-8" pageEncoding = "UTF-8" language
= "java" %>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>注册</title>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/fort.css" />
    <style>
      a {
        font-size: 16px;
        color: white;
      }
    </style>
  </head>

  <body>
    <h1>注册</h1>
    <div class="form-wrapper">
      <%--顶部颜色条--%>
      <div class="top"><div class="colors"></div></div>
      <form name="form" action="register.spring" method="POST">
        <div class="form">
          <div class="form-item">
            <input
              type="text"
              name="username"
              required="required"
              placeholder="用户名"
              autocomplete="off"
            />
          </div>
          <div class="form-item">
            <input
              type="password"
              name="password"
              required="required"
              placeholder="密码"
              autocomplete="off"
            />
          </div>
          <div class="form-item">
            <input
              type="text"
              name="sex"
              required="required"
              placeholder="性别"
              autocomplete="off"
            />
          </div>
          <div class="form-item">
            <input
              type="text"
              name="age"
              required="required"
              placeholder="年龄"
              autocomplete="off"
            />
          </div>
          <div class="form-item">
            <input
              type="text"
              name="city"
              required="required"
              placeholder="籍贯"
              autocomplete="off"
            />
          </div>
          <div class="button-panel">
            <input type="submit" class="button" title="Register" value="注册" />
          </div>
        </div>
      </form>
    </div>

    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/fort.js"></script>
    <script>
      sections();
    </script>
  </body>
</html>

9.接下来开始 Controller 的书写
由于使用了 ajax 异步加载表格数据,所以需要导入将 Bean 转换成 json 数据格式的工具包
fastjson-1.1.15.jar
jsoup-1.8.1.jar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
package com.code.ssm.controller;

import com.alibaba.fastjson.JSONArray;
import com.code.ssm.bean.UserBean;
import com.code.ssm.service.UserService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
@Controller
public class UserController {
    //分页大小
    private static final int PAGESIZE = 5;
    @Resource(name="userService")
    private UserService userService;
    @RequestMapping("/register")
    //当请求register.spring时,自动将表单中的数据封装成UserBean对象,前提是控件name属性要和UserBean属性名相同
    public String register(UserBean userBean, HttpServletRequest request){
        //调用register()实现向数据库中添加数据
        //先执行查询,如果数据库中有同名的数据,则注册失败,跳转到error.jsp
        //如果没有相同数据,则执行insert语句,跳转到success.jsp
        //这时将再次查询数据库,返回所有的用户信息(分页)
        if(userService.register(userBean)){
            //初始化总页数
            int counts = userService.getCounts();
            int pageNum = (int)Math.ceil(counts / (PAGESIZE * 1.0));
            //得到分页数据
            List<UserBean> allUsers = userService.getAllUsers(1,PAGESIZE);
            //放requset
            //request.setAttribute("pageNum",pageNum);
            //放session都一样
            request.getSession().setAttribute("pageNum",pageNum);
            //初始化当前页为第一页
            request.setAttribute("pageNow",1);
            //将所有用户数据返回给jsp显示
            request.getSession().setAttribute("allUsers",allUsers);
            return "success";
        }else return "error";
    }

    //分页请求数据
    @RequestMapping("/limitPage")
    //当点击下一个/上一页/按页数跳转时调用此方法
    public void limitPage(HttpServletRequest request,HttpServletResponse response) throws IOException {
        //先得到当前页数
        int pageNow = Integer.parseInt(request.getParameter("pageNow"));
        //根据当前页在数据库中查询数据
        List<UserBean> allUsers = userService.getAllUsers(pageNow,PAGESIZE);
        PrintWriter out = response.getWriter();
        //将List转换成json格式数据
        out.print(JSONArray.toJSONString(allUsers,true));
    }

    //当点击"删除"是调用此方法
    @RequestMapping(value = "/delUser")
    public void delUser(HttpServletRequest request,HttpServletResponse response,  @RequestParam("id")int id) throws IOException {
        PrintWriter out = response.getWriter();
        if(userService.delUser(id)){
            //删除之后总页数要变
            int counts = userService.getCounts();
            int pageNum = (int)Math.ceil(counts / (PAGESIZE * 1.0));
            int pageNow = Integer.parseInt(request.getParameter("pageNow"));
            List<UserBean> allUsers = userService.getAllUsers(pageNow,PAGESIZE);
            //将总页数放到集合中的最后一个元素
            //因为是ajax局部加载表格,这里将变化后的总页数放到了数据集合中一起传回给jsp
            //在jsp中取集合最后一个元素,然后拆分数据就可以得到总页数
            UserBean pageNumBean = new UserBean();
            pageNumBean.setUsername("pageNum&" + pageNum);
            allUsers.add(pageNumBean);
            out.print(JSONArray.toJSONString(allUsers,true));
        }else out.print("'message':'failed'");
    }
}

10.新建 success.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<%-- Created by IntelliJ IDEA. User: Code.Ai To change this template use File |
Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8" language="java" %> <%@ taglib prefix = "c" uri =
"http://java.sun.com/jsp/jstl/core" %>
<html>
  <head>
    <title>success</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
    <link
      href="./bootstrap/css/bootstrap-datetimepicker.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div class="container-fluid">
      <!--标题-->
      <div class="row-fluid">
        <div class="span12">
          <h3 class="text-center" style="color: white">全部用户信息</h3>
        </div>
      </div>
      <!--表格-->

      <div
        class="row-fluid table-responsive"
        style="border: solid;background-color: white"
      >
        <table class="table   table-bordered">
          <tr>
            <th class="col-md-2">姓名</th>
            <th class="col-md-2">年龄</th>
            <th class="col-md-2">性别</th>
            <th class="col-md-3">籍贯</th>
            <th class="col-md-3">操作</th>
          </tr>
        </table>

        <div
          id="tableTD"
          class="row-fluid"
          style="overflow-y: auto;height: 208px;margin-top: -20px;background-color: white"
        >
          <table id="table" class="table  table-bordered  table-condensed">
            <c:forEach
              items="${sessionScope.allUsers}"
              var="user"
              <%--点击表格行改变颜色--%
            >
              <tr onclick="select(this,'#selectID')">
                <input type="hidden" value="${user.id}" />
                <td class="col-md-2">${user.username}</td>
                <td class="col-md-2">${user.age}</td>
                <td class="col-md-2">${user.sex}</td>
                <td class="col-md-3">${user.city}</td>
                <td class="col-md-3">
                  <a href="#" id="${user.id}" onclick="delUser(this)">删除</a>
                </td>
              </tr>
            </c:forEach>
          </table>
          <input type="hidden" value="-1" id="selectID" name="selectID" />
        </div>

        <%--分页按钮--%>
        <div class="row-fluid">
          <div class="span12">
            <div>
              <button
                id="previousPage"
                class="btn btn-sm"
                type="button"
                style="line-height:0px"
              >
                <span class="glyphicon glyphicon-chevron-left"></span>
              </button>
              <input
                id="pageNow"
                type="text"
                style="width: 40px;height: 20px"
                value="${requestScope.pageNow}"
              />
              <label id="pageNum">/${sessionScope.pageNum}</label>
              <button
                id="go"
                class="btn btn-sm"
                type="button"
                style="line-height:0px"
              >
                <span class="glyphicon glyphicon-step-forward"></span>
              </button>
              <button
                id="nextPage"
                class="btn  btn-sm"
                type="button"
                style="line-height:0px"
              >
                <span class="glyphicon glyphicon-chevron-right"></span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
    <script
      type="text/javascript"
      src="./bootstrap/js/bootstrap.min.js"
    ></script>
    <script
      type="text/javascript"
      src="./bootstrap/js/bootstrap-table.js"
    ></script>
    <script
      type="text/javascript"
      src="./bootstrap/js/bootstrap-datetimepicker.js"
      charset="UTF-8"
    ></script>
    <script
      type="text/javascript"
      src="./bootstrap/js/locales/bootstrap-datetimepicker.zh-CN.js"
      charset="UTF-8"
    ></script>
    <script type="text/javascript" src="./js/index.js"></script>

    <script type="text/javascript" src="./js/ajaxfileupload.js"></script>
    <script type="text/javascript" src="./js/uploadPreview.min.js"></script>

    <script type="text/javascript">
      //全局
      var pageNow = parseInt($("#pageNow").val());
      var pageNum = parseInt(${sessionScope.pageNum});

      function delUser(obj){
          var id = obj.id;
          $.ajax({
              type: 'POST',
              url: 'delUser.spring',
              data: {'id': id,'pageNow':pageNow},
              cache: false,
              //不能用json
              dataType: 'text',
              success: function (data) {
                  var jsonObj = eval("("+ data+")");
                  if(jsonObj.message == "failed"){
                      alert("删除失败");
                  }else{
                      //删除单行
                      //obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
                      //设置总页数 在集合中的最后一个元素的username中
                      var arrayObj =  jsonObj[jsonObj.length - 1].username.split("&");
                      pageNum = arrayObj[1];
                      $("#pageNum").text("/"+pageNum);
                      $("#table").empty();
                      for (var i = 0; i < jsonObj.length; i++) {
                          $("#table").append(
                                  "<tr>" +
                                  "<td class = 'col-md-2' >"+  jsonObj[i].username+"</td>" +
                                  "<td class = 'col-md-2' >"+  jsonObj[i].age+"</td>" +
                                  "<td class = 'col-md-2' >" + jsonObj[i].sex + "</td>" +
                                  "<td class = 'col-md-3' >" + jsonObj[i].city + "</td>" +
                                  "<td class = 'col-md-3' >" + "<a href='#' id= " + jsonObj[i].id +" onclick='delUser(this)'>删除</a>" + "</td>" +
                                  "</tr>");
                      }
                  }
              }
          });
          return false;
      }

      /**************************************************************************/

      //上一页事件
      $("#previousPage").click(function () {
          if (pageNow > 1){
              pageNow = pageNow -1 ;
              $.ajax({
                  type: "GET",
                  url: "limitPage.spring",
                  data: { "pageNow": pageNow},
                  dataType: 'text',
                  success: function (data) {
                      $("#pageNow").val(pageNow);
                      var jsonObj = eval("(" + data + ")");
                      $("#table").empty();
                      for (var i = 0; i < jsonObj.length; i++) {
                          $("#table").append(
                                  "<tr>" +
                                  "<td class = 'col-md-2' >"+  jsonObj[i].username+"</td>" +
                                  "<td class = 'col-md-2' >"+  jsonObj[i].age+"</td>" +
                                  "<td class = 'col-md-2' >" + jsonObj[i].sex + "</td>" +
                                  "<td class = 'col-md-3' >" + jsonObj[i].city + "</td>" +
                                  "<td class = 'col-md-3' >" + "<a href='#' id= " + jsonObj[i].id +" onclick='delUser(this)'>删除</a>" + "</td>" +
                                  "</tr>");
                      }
                  }
              })
          }
          else alert("已是第一页！");
      });

      //下一页事件
      $("#nextPage").click(function () {
          if (pageNow < pageNum){
              pageNow = pageNow + 1;
              $.ajax({
                  type: "GET",
                  url: "limitPage.spring",
                  data: { "pageNow": pageNow},
                  dataType: 'text',
                  success: function (data) {
                      $("#pageNow").val(pageNow);
                      var jsonObj = eval("(" + data + ")");
                      $("#table").empty();
                      for (var i = 0; i < jsonObj.length; i++) {
                          $("#table").append(
                                  "<tr>" +
                                  "<td class = 'col-md-2' >"+  jsonObj[i].username+"</td>" +
                                  "<td class = 'col-md-2' >"+  jsonObj[i].age+"</td>" +
                                  "<td class = 'col-md-2' >" + jsonObj[i].sex + "</td>" +
                                  "<td class = 'col-md-3' >" + jsonObj[i].city + "</td>" +
                                  "<td class = 'col-md-3' >" + "<a href='#' id= " + jsonObj[i].id +" onclick='delUser(this)'>删除</a>" + "</td>" +
                                  "</tr>");
                      }
                  }
              })
          }

          else alert("已是最后一页！");
      });

      //跳转到指定页点击事件
      $("#go").click(function () {
          var num = parseInt($("#pageNow").val());
          if(num <= pageNum){
              $.ajax({
                  type: "GET",
                  url: "limitPage.spring",
                  data: {"pageNow": num},
                  dataType: 'text',
                  success: function (data) {
                      pageNow = num;
                      var jsonObj = eval("(" + data + ")");
                      $("#table").empty();
                      for (var i = 0; i < jsonObj.length; i++) {
                          $("#table").append(
                                  "<tr>" +
                                  "<td class = 'col-md-2' >"+  jsonObj[i].username+"</td>" +
                                  "<td class = 'col-md-2' >"+  jsonObj[i].age+"</td>" +
                                  "<td class = 'col-md-2' >" + jsonObj[i].sex + "</td>" +
                                  "<td class = 'col-md-3' >" + jsonObj[i].city + "</td>" +
                                  "<td class = 'col-md-3' >" + "<a href='#' id= " + jsonObj[i].id +" onclick='delUser(this)'>删除</a>" + "</td>" +
                                  "</tr>");
                      }
                  }
              })
          }else alert("超出总页数");
      });
    </script>
  </body>
</html>

效果

由于没有配置编码过滤器,所以添加进去的是乱码