layout: _posts
title: 学习使用jquery+ajax（01）
date: 2017-08-05 11:55:48
tags:
第一次用以印象笔记己东西，现在在做的项目让我学到了一些东西，这是对jquery+ajax有了一些初步的了解，大概明白了Jquery和Ajax的一些基础用法Jquery，先举了例子，例子如下：
前期准备
环境配置
导入jquery包
有两种方式导入jquery包
本地引入jquery包
首先 Jquery官网上下载jquery.js，然后在自己的页面文件中添加：
<script src="jquery.js"></script>
CDN引入
CDN引入，在页面文件中添加一下代码：
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
编写jquery代码
<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>
代码编写
代码实例
$(document).ready.(function(){//预加载
$("ul a").click(function(){//标签选择器，选择ul下的a标签设置单击事件，点击调用function
$("#datelist").show();//方法体，标签选择器，show()显示选中的标签
})
})
在我理解中，jquery就是选中下方的html便签，设置相应的事件，并进行相应的操作，然后动态的更改html的样式或者是值。使用jqery的一些注意事项及要点有一下几点。（我自己理解的...）
-
首先我们要引入包,
<script src="${pageContext.request.contextPath }/js/jquery-1.12.4.js"></script>，引入之后才能运用jquery的代码。 -
$(document).ready(function(){ }),这是入口程序。 -
“#”id选择器，"."类选择器，"ul a"ul下的a标签，W3C中写的很清楚。
-
$(this),选中当前点击操作的标签，$(this).text()；当前点击的标签中夹的值，如：<a>text</a>,中间夹的值就是text -
jquery中text()、html()、val()的区别：http://www.jianshu.com/p/ce1c173e3ed2，写的很详细。
-
动态添加标签
$("#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中的一个方法吧，看下面的例子：
前台网页代码
$.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)
@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/
网友评论