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>,中間夾的值就是textjquery中text()、html()、val()的區別：http://www.lxweimin.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/
