layout: _posts
title: 學習使用jquery+ajax（01）
date: 2017-08-05 11:55:48
tags:
第一次用以印象筆記己東西以故，現(xiàn)在在做的項目讓我學到了一些東西语卤，這是對jquery+ajax有了一些初步的了解，大概明白了Jquery和Ajax的一些基礎(chǔ)用法Jquery，先舉了例子，例子如下：
前期準備
環(huán)境配置
導入jquery包
有兩種方式導入jquery包
本地引入jquery包
首先 Jquery官網(wǎng)上下載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標簽設(shè)置單擊事件，點擊調(diào)用function
$("#datelist").show();//方法體变擒，標簽選擇器君珠，show()顯示選中的標簽
})
})
在我理解中，jquery就是選中下方的html便簽娇斑，設(shè)置相應(yīng)的事件策添，并進行相應(yīng)的操作，然后動態(tài)的更改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>,中間夾的值就是textjquery中text()沉桌、html()谢鹊、val()的區(qū)別：http://www.reibang.com/p/ce1c173e3ed2，寫的很詳細蒲牧。
動態(tài)添加標簽
$("#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現(xiàn)在就用過一種冰抢，Ajax應(yīng)該就是Jquery中的一個方法吧，看下面的例子：
前臺網(wǎng)頁代碼
$.ajax({
url:"${pageContext.request.contextPath }/GetReport_feeratePageCtrl.action", //請求的地址（cootroller中寫的地址）
type:"post", //請求的類型
data:{"pageIndex":"1","pageSize":"2"}, //請求傳入controller的參數(shù)
datetype:"json", //返回值的類型
success:function(hashMap){ //操作成功的回調(diào)函數(shù)艘狭，hashMap就是回調(diào)函數(shù)返回值挎扰，也就是后臺返回的值
$("#pageIndex").text(hashMap["paging"].pageIndex);//設(shè)置當前頁數(shù)
$.each(hashMap["Report_feerate"],function(i,val){ //Jquery的循環(huán)遍歷寫法翠订，對hashMap中與鍵 "Report_feerate"對應(yīng)的值進行遍歷，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);//設(shè)置總頁數(shù)
}
})
后臺代碼
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); //設(shè)置鍵值對梧躺，值可以是任意的似谁，包括集合List
hashMap.put("paging", paging);
return hashMap; //回調(diào)函數(shù)的返回值
}
總結(jié)
這是做項目到時候?qū)W習jquery+ajax到時候的學習總結(jié)，現(xiàn)在寫到博客上記錄一下掠哥，如果有什么問題以后再來慢慢修改巩踏，也歡迎大家多多指點！也附上我博客的鏈接续搀，歡迎大家多多訪問塞琼！
https://heartsxin.github.io/
http://heartsxin.coding.me/heartsxin/
