一个基于SSM的Ajax的小例子

       Ajax，即”Asynchronous Javasript And XML”,是一种创建交互式网页应用的网页开发技术。Ajax只需要后台与服务器进行少量数据交换，即可使网页实现异步更新。这意味着我们不需要重新更新整个网页，即可使网页某个部分更新，这样不仅使用户在等待后台响应时，还能浏览网页的其他部分，而且也大大节省了网络资源。下面是一个小例子，是关于批量删除的。

1、首先是前台的传输，这里首先引入jquery-3.2.1.min.js,这里面传输的是用户的id数组，然后将它字符串化进行传输。

<script type ="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
   function deleteAll() {
      var checkNum = $("input[name='ids']:checked").length;
      if(checkNum==0){
          alert("至少选择一项");
          return;
      }
            if(confirm("确定要删除吗？")){
                var userlist = new Array();
                $("input[name='ids']:checked").each(function () {
             userlist.push($(this).val());
                });
                $.ajax({
                    type:"post",
                    data:{userlist:userlist.toString()},
                    url:"${pageContext.request.contextPath}/user/deleteAll.do",
                    success:function () {
                        alert("删除成功");
                        location.reload();
                    }
                })
       }
       }
</script>

<tbody>
    <c:forEach var="userInfo" items="${pageInfo.list}">
      <tr>
         <td><input name="ids" type="checkbox" value="${userInfo.id}"></td>
         <td>${userInfo.id}</td>
         <td>${userInfo.username}</td>
         <td>${userInfo.password}</td>
         <td class="text-center">
            <a href="/user/toUpdate.do?id=${userInfo.id}" class="btn bg-olive btn-xs">更新</a>
            <a href="/user/delete.do?id=${userInfo.id}" class="btn bg-olive btn-xs">删除</a>
            <a href="/user/toAddRole.do?id=${userInfo.id}" class="btn bg-olive btn-xs">添加角色</a>
         </td>
      </tr>
   </c:forEach>
</tbody>

2、然后是对应的Controller

@Controller
@RequestMapping("user")
public class UserInfoController {
@Autowired
private  UserInfoServerImpl userInfoServer;

@RequestMapping("deleteAll.do")
@ResponseBody
public String deleteAll(String userlist){
    String[] strs = userlist.split(",");
    List<Integer> ids = new ArrayList<>();
    for (int i=0;i<strs.length;i++){
        ids.add(Integer.parseInt(strs[i]));
    }
    userInfoServer.deleteAllUser(ids);
    return "";
}
}

3、然后是对应的业务层

@Service("userInfoServer")
public class UserInfoServerImpl implements IUserInfoServer {
    @Autowired
    private  IUserInfoDao userInfoDao;

@Override
public void deleteAllUser(List<Integer> ids) {
  userInfoDao.deleteAll(ids);
  }

}

public interface IUserInfoServer extends UserDetailsService {
public void deleteAllUser(List<Integer> ids);
}

4、Dao层

public interface IUserInfoDao {
public  void deleteAll(List<Integer> ids);
}

5、对应的Mapper文件

<?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.zhongruan.dao.IUserInfoDao" >

<delete id="deleteAll" parameterType="int">
    delete  from userinfo where id in
    <foreach collection="list" item="id" open="("  close=")"  separator=",">
        #{id}
    </foreach>
</delete>

</mapper>

6、运行截图