前端技术Jquery与Ajax使用总结

页面导航:首页 > 网络编程 > JavaScript > 前端技术Jquery与Ajax使用总结

前端技术Jquery与Ajax使用总结

来源: 作者: 时间:2016-02-05 11:06 【

虽然主要是做的后端,但是由于有些时候也要写写前台的界面,因此也就学习了下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。
 
  上面的仅仅是其中一个方法,还有一个方法也可以实现,而且是从后台直接取来的数据,不用放在的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      }
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的小结。
 
 
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<