脚本宝典收集整理的这篇文章主要介绍了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 }
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的小结。
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-前端技术Jquery与Ajax使用总结全部内容,希望文章能够帮你解决javascript代码实例教程-前端技术Jquery与Ajax使用总结所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。