第一次用以印象笔记己东西,现在在做的项目让我学到了一些东西,这是对jquery+ajax有了一些初步的了解,大概明白了Jquery和Ajax的一些基础用法Jquery,先举了例子,例子如下:
前期准备
环境配置
导入jquery包
有两种方式导入jquery包
本地引入jquery包
首先 Jquery官网上下载jquery.js,然后在自己的页面文件中添加:
1
| <script src="jquery.js"></script>
|
CDN引入
CDN引入,在页面文件中添加一下代码:
1
| <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
|
编写jquery代码
1 2 3 4 5 6 7 8 9 10 11
| <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> //引入jquery <script type="text/javascript"> $(document).ready(function(){ //自身要写的jQuery代码 }); </script> </head>
|
代码编写
代码实例
1 2 3 4 5
| $(document).ready.(function(){//预加载 $("ul a").click(function(){//标签选择器,选择ul下的a标签设置单击事件,点击调用function $("#datelist").show();//方法体,标签选择器,show()显示选中的标签 }) })
|
在我理解中,jquery就是选中下方的html便签,设置相应的事件,并进行相应的操作,然后动态的更改html的样式或者是值。使用jqery的一些注意事项及要点有一下几点。(我自己理解的…)
1 2
| $("#datalist").append( "<tr><td>"+val.ip+"</td><td>"+val.acno+"</td><td>"+val.acname+"</td><td>"+val.idcard+"</td> <td>"+val.acsumd+"</td></tr>" );//在id为datelist的标签后添加标签,添加括号中的标签。
|
Ajax现在就用过一种,Ajax应该就是Jquery中的一个方法吧,看下面的例子:
前台网页代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| $.ajax({ url:"${pageContext.request.contextPath }/GetReport_feeratePageCtrl.action", //请求的地址(cootroller中写的地址) type:"post", //请求的类型 data:{"pageIndex":"1","pageSize":"2"}, //请求传入controller的参数 datetype:"json", //返回值的类型 success:function(hashMap){ //操作成功的回调函数,hashMap就是回调函数返回值,也就是后台返回的值 $("#pageIndex").text(hashMap["paging"].pageIndex);//设置当前页数 $.each(hashMap["Report_feerate"],function(i,val){ //Jquery的循环遍历写法,对hashMap中与键 "Report_feerate"对应的值进行遍历,i是此时,val是值。 $("#datalist2").append( //在标签后添加html标签 "<tr><td>"+val.ip+"</td><td>"+val.monthpay+"</td><td>"+val.setmeal+"</td><td>"+val.time+"</td></tr>" ); }) $("#pageCount").text(hashMap["paging"].pageCount);//设置总页数 } })
|
后台代码
SSM框架中controller层的代码(Servlet)
1 2 3 4 5 6 7 8 9 10
| @ResponseBody //表示是Ajax中使用的,声明 @RequestMapping("/GetReport_feeratePageCtrl") public HashMap<String, Object> getReport_feerate(Paging paging){ //要是返回的是多个对象则要用hashMap进行传值 paging.setTotalrecord(iReportService.getReport_feerateByFeeRecord()); List<Report_feerate> Report_feerate = iReportService.getReport_feerateByFee(paging); HashMap<String, Object> hashMap = new HashMap<>(); //新建一个hashMap hashMap.put("Report_feerate", Report_feerate); //设置键值对,值可以是任意的,包括集合List hashMap.put("paging", paging); return hashMap; //回调函数的返回值 }
|
总结
这是做项目到时候学习jquery+ajax到时候的学习总结,现在写到博客上记录一下,如果有什么问题以后再来慢慢修改,也欢迎大家多多指点!也附上我博客的链接,欢迎大家多多访问!
https://heartsxin.github.io/
http://heartsxin.coding.me/heartsxin/