前端技术Jquery与Ajax使用总结

　　虽然主要是做的后端，但是由于有些时候也要写写前台的界面，因此也就学习了下Jquery和Ajax的一些知识，虽说此次写的这些对于前端大神来说有些班门弄斧的感觉，但是为了加深自己的记忆，还是总结一下下，有什么不对的地方欢迎大家指出~

准备工作

　　由于我是使用的bootstrap，所以有些操作也是基于它来进行的，比如说模态框什么的，有关bootstrap的相关知识可以到这里去学习。然后这个项目用的是Struts框架。好了，基本情况就是酱紫了。

1. 将jquery的包以及bootstrp的包导入进来。
2. 在jsp页面进行引入。
   

　　就像这样子：

1 <script src="http://www.mamicode.com/js/bootstrap.min.js"></script>2 <script src="http://www.mamicode.com/js/main.js"></script>3 <script src="http://www.mamicode.com/js/html5shiv.js"></script>4 <script src="http://www.mamicode.com/js/respond.js"></script>5 <link href="http://www.mamicode.com/css/bootstrap.min.css" rel="stylesheet">6 <link href="http://www.mamicode.com/css/main.css" rel="stylesheet">7 <script src="http://www.mamicode.com/js/jquery-1.11.1.min.js"></script>

View Code

使用技巧之后台数据在前台显示

　　首先是使用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="http://www.mamicode.com/vmList" var="vm" >2 <td><s:property value="http://www.mamicode.com/#vm.hostName" /></td>3 <td><s:property value="http://www.mamicode.com/#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="http://www.mamicode.com/hostList" id="item">4  array.push("<s:property value="http://www.mamicode.com/#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);

View Code

 　主要方法一般写在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/

　　<。)#)))≦

前端技术Jquery与Ajax使用总结