（八）頁面顯示修改及ajax相關

AJAX

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。
AJAX不是新的編程語言，而是一種使用現有標準的新方法。
AJAX 是與服務器交換數據並更新部分網頁的藝術，在不重新加載整個頁面的情況下。
http://www.w3school.com.cn/ajax/index.asp

AJAX的功能簡單來說，就是在不重載整個網頁的情況下，AJAX 通過後臺加載數據，並在網頁上進行顯示。

Ajax實現批量刪除

如下圖所示，現在要批量刪除9，10的記錄

批量刪除按鈕調用deleteAll()

<button type="button" class="btn btn-default" title="批量刪除" onclick="deleteAll()">
     <i class="fa fa-refresh"></i> 批量刪除
 </button>

Ajax向deleteAll.do發送請求

獲取所有勾選的id，發送到服務器

    <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",
                url: "${pageContext.request.contextPath}/user/deleteAll.do",
                data: {userList: userList.toString()},
                success: function () {
                    alert("刪除成功");
                    location.reload();
                },
                error: function () {
                    alert("刪除失敗");

                }
            })
        }
    </script>

後臺接收列表數據，提取出id，實現批量刪除

    @RequestMapping("deleteAll.do")
    @ResponseBody
    public String deleteAll(String userList){
        String[] strings=userList.split(",");
        List<Integer> ids=new ArrayList<>();
        for ( String  s:strings ) {
            ids.add(Integer.parseInt(s));
        }
        userInfoService.deleteAll(ids);
        return "";
    }

UserInfoService.java

	public interface IUserInfoService extends UserDetailsService {
      void deleteAll(List<Integer> ids);
}

UserInfoServiceImpl.java

@Service("userInfoService")
public class UserInfoServiceImpl implements IUserInfoService {
    @Autowired
    IUserInfoDao userInfoDao;
    @Override
    public List<UserInfo> findAll(int page, int size) {
    @Override
    public void deleteAll(List<Integer> ids) {
        userInfoDao.deleteAll(ids);
    }
}

IUserInfoDao .java

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

UserInfoMapper.xml

<?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="list">
        delete from userinfo
        where id in
        <foreach collection="list" item="id" open="("  close=")"  separator=",">
            #{id}
        </foreach>
    </delete>
</mapper>

測試效果：