虽然主要是做的后端，但是由于有些时候也要写写前台的界面，因此也就学习了下jquery和Ajax的一些知识，虽说此次写的这些对于前端大神来说有些班门弄斧的感觉，但是为了加深自己的记忆，还是总结一下下，有什么不对的地方欢迎大家指出~
准备工作
由于我是使用的bootstrap，所以有些操作也是基于它来进行的，比如说模态框什么的，有关bootstrap的相关知识可以到这里去学习。然后这个项目用的是Struts框架。好了，基本情况就是酱紫了。
就像这样子：
<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>
http://www.gaodaima.com/30574.html
使用技巧之后台数据在前台显示
首先是使用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的小结。
欢迎大家阅读《Jquery与Ajax使用总结_js》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码
转载请注明原文链接：Jquery与Ajax使用总结_js
