前端技术Jquery与Ajax使用总结
虽然主要是做的后端，但是由于有些时候也要写写前台的界面，因此也就学习了下Jquery和Ajax的一些知识，虽说此次写的这些对于前端大神来说有些班门弄斧的感觉，但是为了加深自己的记忆，还是总结一下下，有什么不对的地方欢迎大家指出~
准备工作
由于我是使用的bootstrap，所以有些操作也是基于它来进行的，比如说模态框什么的，有关bootstrap的相关知识可以到这里去学习。然后这个项目用的是Struts框架。好了，基本情况就是酱紫了。
- 将jquery的包以及bootstrp的包导入进来。
- 在jsp页面进行引入。
就像这样子：
1 <script src="js/bootstrap.min.js"></script> 2 <script src="js/main.js"></script> 3 <script src="js/html5shiv.js"></script> 4 <script src="js/respond.js"></script> 5 <link href="css/bootstrap.min.css" rel="stylesheet"> 6 <link href="css/main.css" rel="stylesheet"> 7 <script src="js/jquery-1.11.1.min.js"></script>
使用技巧之后台数据在前台显示
首先是使用s标签库把后台的数据在前台的jsp页面进行显示的操作，后台进行的操作就是实例化一个对象，然后将这个对象存在一个list表中。下面是其中的部分代码：
VmManage vmManage = new VmManage();进行实例化。然后：
1 vmManage.setHostName(server.getHost()); 2 vmManage.setCreatTime(server.getCreated().toString().replaceAll("(?:T|Z)"," ")); 3 vmList.add(vmManage);
其中vmManage是一个对象，至于vmList，
1 private List<VmManage> vmList = new ArrayList<VmManage>();
当然，必须要有get和set方法，不然前台是无法接收到的。然后前台就可以像下面这样子获得数据，并进行显示：
1 <s:iterator value="vmList" var="vm" > 2 <td><s:property value="#vm.hostName" /></td> 3 <td><s:property value="#vm.creatTime" /></td> 4 </s:iterator>
PS：显示时定义别名，也就是var，然后用s标签，value中要用“#”进行数据的读，这样就可以让后台数据在前台进行显示了。
使用技巧之获取当前行显示在模态框中
操作数据库最多的操作就是CRUD，也就是增删改查，而数据获取后自然要有修改的选项，点击修改按钮，将这一行的数据全部获取然后显示在模态框中是很基本的操作了，这个时候可以利用一些属性将刚刚从后台获取的值放进去，比如，这样做：
1 <a href="#" class="migrate" rel='${vm }'>
注意：这个时候的值需要用$来获取。
然后这下就可以用Jquery来获取刚刚传来的值，方式如下：
1 $(".migrate").click( 2 function() { 3 var vm = $(this).attr('rel'); 4 obj = JSON.parse(vm);
由于这样获取的是JSON类型的值，所以需要进行一下解析，然后obj和上面的vm类似，此时，obj.hostName就是前面部分的#vm.hostName。
上面的仅仅是其中一个方法，还有一个方法也可以实现，而且是从后台直接取来的数据，不用放在jsp的body里面，在<script language="javascript">标签里面就可以使用了，具体方法如下：
1 <script language="javascript"> 2 var array = new Array(); 3 <s:iterator value="hostList" id="item"> 4 array.push("<s:property value="#item.name" />"); 5 </s:iterator> 6 </script>
这个是将一个hostList的列表的name存在一个数组中，注意：在这里不要用别名，也就是var，要用id来代替之前的var，但是效果是等同的，然后可以将其动态加入到select选项中去：
1 <td><select class="input-group-lg form-control"name="vmManage.hostName" id="dhost"> 2 </select></td>
具体添加方法如下：
1 for (var i = 0; i < array.length; i++) { 2 if (array[i] != obj.hostName) { 3 $("#dhost").append("<option>"+ array[i]+ "</option>"); 4 } 5 6 }
使用技巧之Ajax小结
有关Jquery的知识总结就到这里，接下来是Ajax的相关知识，主要实现的是动态的从后台获取值，并进行页面不刷新的更新，时间是5s获取一次值并进行一次刷新，基本的Ajax是这样写的：
1 self.setInterval( 2 function() { 3 $.ajax({ 4 url : "vmmanage_getVMStatus.action", 5 type : 'post', 6 timeout : 15000, 7 beforeSend : function( 8 XMLHttpRequest) {}, 9 success : function(result) { 10 }, 11 complete : function( 12 XMLHttpRequest, 13 textStatus) { 14 }, 15 error : function( 16 XMLHttpRequest, 17 textStatus, 18 errorThrown) { 19 20 } 21 }); 22 }, 5000);
主要方法一般写在success中，从后台获取的数据一般是这样传过来的：
1 ServletActionContext.getResponse().getWriter().print(vmList);
然后在前台的Ajax中通过result进行接收，接收后照常是JSON格式，不要忘了进行解析一下，然后就是进行表格中需要更新的字段的定位了，我用的方法是通过ID进行定位，也就是在table的tr中将值设为id，这样可以保证值的唯一性，不会定位错误导致更改所有的行，然后通过
1 var s = document.getElementById(obj[o].id).cells[5];
获取那一行的值，再用cells获取那一行中要修改的列，接下来就是值的动态更新了，将当前字段用从后台的字段取代即可，我是这样做的：
1 s.innerHTML = sta
sta即为从result中获取的后台传过来的值。
以上便是对于近期使用的Jquery和Ajax的小结。
PS:本博客欢迎转发，但请注明博客地址及作者~
博客地址：http://www.cnblogs.com/voidy/
<。)#)))≦
