javascript代码实例教程-前端技术Jquery与Ajax使用总结

发布时间:2019-01-21 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-前端技术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      }

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的小结。

 

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-前端技术Jquery与Ajax使用总结全部内容,希望文章能够帮你解决javascript代码实例教程-前端技术Jquery与Ajax使用总结所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。