中軟國際實習第七天-Ajax使用

Ajax使用

Ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創建交互式網頁應用的網頁開發技術。Ajax 是一種用於創建快速動態網頁的技術。Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。通過在後臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 Ajax）如果需要更新內容，必須重載整個網頁頁面。下面就Ajax的使用流程進行說明：
(1)在webapp下導入js包
(2)在header中加入引用聲明

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>

（3）在頁面中加入對js的調用
表單中複選框設置name爲ids,value爲userInfo.id，用於給函數傳參

<td><input name="ids" type="checkbox" value="${userInfo.id}"></td>
給“批量刪除”按鈕增加對deleteAll函數的調用
<button type="button" class="btn btn-default" title="批量刪除"
      onclick="deleteAll()" >
   <i class="fa fa-file-o"></i> 批量刪除
</button>

（4）在header中增加對函數的具體實現
其中@ResponseBody爲聲明返回JSON字符串給前端

@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]));
    }
    userInfoService.deleteAll(ids);
    return "";
}

（5）分別進行持久層、服務層和控制層的實現
// 持久層接口

void deleteAll(List<Integer> ids);
// mapper文件實現
<delete id="deleteAll" parameterType="list">
    delete from userinfo where id in
        <foreach collection="list" item="id" open="(" close=")" separator=",">
            #{id}
        </foreach>
</delete>

//服務層實現

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

// 控制層實現

@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]));
    }
    userInfoService.deleteAll(ids);
    return "";
}

（6）效果展示

使用Spring Security進行授權和認證

（1）使用認證來顯示用戶信息

<div class="pull-left info">
   <p>
      <security:authentication property="principal.username"></security:authentication>
   </p>
   <a href="#"><i class="fa fa-circle text-success"></i> 在線</a>
</div>

（2）使用權限來對視圖進行管理，有權限的用戶可以看到“用戶管理”模塊

<security:authorize access="hasRole('ADMIN')">
   <a
   href="${pageContext.request.contextPath}/user/findAll.do?page=1&size=5"> <i
      class="fa fa-circle-o"></i> 用戶管理
   </a>
</security:authorize>

get請求與post請求

get請求：
實例：查詢，獲取用戶信息
特點：傳參顯示在URL中，常用於獲取信息而非修改信息
缺陷：由於傳參是後綴在URL中一起發送，因此傳參內容收到URL長度的限制，此外也會有一定的安全問題。

post請求：
實例：表單數據發送，更新用戶信息
特點：放在HTTP的包中發送，不會顯示在URL中，POST的內容是沒有長度限制的。常用於修改資源。

參考資料

[1].https://baike.baidu.com/item/ajax/8425
[2].https://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html