Jquery與Ajax使用總結

　　雖然主要是做的後端，但是由於有些時候也要寫寫前台的介面，因此也就學習了下Jquery和Ajax的一些知識，雖說此次寫的這些對於前端大神來說有些班門弄斧的感覺，但是為了加深自己的記憶，還是總結一下下，有什麼不對的地方歡迎大家指出~

準備工作

　　由於我是使用的bootstrap，所以有些操作也是基於它來進行的，比如說模態框什麼的，有關bootstrap的相關知識可以到這裡去學習。然後這個項目用的是Struts架構。好了，基本情況就是醬紫了。

1. 將jquery的包以及bootstrp的包匯入進來。
2. 在jsp頁面進行引入。
   

　　就像這樣子：

<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<script src="js/jquery-1.11.1.min.js"></script>

 

提示之後台資料在前台顯示

首先是使用s標籤庫把背景資料在前台的jsp頁面進行顯示的操作，後台進行的操作就是執行個體化一個對象，然後將這個對象存在一個list表中。下面是其中的部分代碼：

VmManage vmManage = new VmManage();進行執行個體化。然後：

 vmManage.setHostName(server.getHost());
 vmManage.setCreatTime(server.getCreated().toString().replaceAll("(?:TZ)"," "));
 vmList.add(vmManage);

 　　其中vmManage是一個對象，至於vmList，

 private List<VmManage> vmList = new ArrayList<VmManage>();

 　　當然，必須要有get和set方法，不然前台是無法接收到的。然後前台就可以像下面這樣子獲得資料，並進行顯示：

 <s:iterator value="vmList" var="vm" >
 <td><s:property value="#vm.hostName" /></td>
 <td><s:property value="#vm.creatTime" /></td>
 </s:iterator>

PS：顯示時定義別名，也就是var，然後用s標籤，value中要用“#”進行資料的讀，這樣就可以讓後台資料在前台進行顯示了。

 提示之擷取當前行顯示在模態框中

操作資料庫最多的操作就是CRUD，也就是增刪改查，而資料擷取後自然要有修改的選項，點擊修改按鈕，將這一行的資料全部擷取然後顯示在模態框中是很基本的操作了，這個時候可以利用一些屬性將剛剛從後台擷取的值放進去，比如，這樣做：

 <a href="#" class="migrate" rel='${vm }'>

 　  注意：這個時候的值需要用$來擷取。

然後這下就可以用Jquery來擷取剛剛傳來的值，方式如下：

 $(".migrate").click(
          function() {
                var vm = $(this).attr('rel');
                obj = JSON.parse(vm);

 　　由於這樣擷取的是JSON類型的值，所以需要進行一下解析，然後obj和上面的vm類似，此時，obj.hostName就是前面部分的#vm.hostName。

上面的僅僅是其中一個方法，還有一個方法也可以實現，而且是從後台直接取來的資料，不用放在jsp的body裡面，在<script language="javascript">標籤裡面就可以使用了，具體方法如下：

 <script language="javascript">
  var array = new Array();
 <s:iterator value="hostList" id="item">
  array.push("<s:property value="#item.name" />");
  </s:iterator>
 </script>

 　　這個是將一個hostList的列表的name存在一個數組中，注意：在這裡不要用別名，也就是var，要用id來代替之前的var，但是效果是等同的，然後可以將其動態加入到select選項中去：　

 <td><select class="input-group-lg form-control"name="vmManage.hostName" id="dhost">
  </select></td>

 　  具體添加方法如下：　

 for (var i = 0; i < array.length; i++) {
    if (array[i] != obj.hostName) {
      $("#dhost").append("<option>"+ array[i]+ "</option>");
      }
 
   }

 提示之Ajax小結

有關Jquery的知識總結就到這裡，接下來是Ajax的相關知識，主要實現的是動態從後台擷取值，並進行頁面不重新整理的更新，時間是5s擷取一次值並進行一次重新整理，基本的Ajax是這樣寫的：　　

self.setInterval(
         function() {
        $.ajax({
             url : "vmmanage_getVMStatus.action",
             type : 'post',
             timeout : 15000,
             beforeSend : function(
                 XMLHttpRequest) {},
                 success : function(result) {
                 },
                 complete : function(
                     XMLHttpRequest,
                     textStatus) {
                 },
                 error : function(
                    XMLHttpRequest,
                    textStatus,
                    errorThrown) {

                            }
                        });
                    }, 5000);

 ServletActionContext.getResponse().getWriter().print(vmList);

 　然後在前台的Ajax中通過result進行接收，接收後照常是JSON格式，不要忘了進行解析一下，然後就是進行表格中需要更新的欄位的定位了，我用的方法是通過ID進行定位，也就是在table的tr中將值設為id，這樣可以保證值的唯一性，不會定位錯誤導致更改所有的行，然後通過

 var s = document.getElementById(obj[o].id).cells[5];

擷取那一行的值，再用cells擷取那一行中要修改的列，接下來就是值的動態更新了，將當前欄位用從背景欄位取代即可，我是這樣做的：

 s.innerHTML = sta

sta即為從result中擷取的後台傳過來的值。

以上便是對於近期使用的Jquery和Ajax的小結。