預備知識
- JavaScript
- 引入javaScript , < script >
- 函式
- 選擇器
- 標簽選擇器
- 類選擇器 .
- id選擇器 #
- jQuery公式
- $(選擇器).事件(引數)
- $(select).action(...)
Ajax
Ajax = Asynchronous Javascript And XML（異步 JavaScript 和 XML）Ajax
Ajax是一種創建互動式、快速動態網頁應用的網頁開發技術，無需重新加載整個網頁的情況下，能夠更新部分網頁的技術，
Ajax不是一種新的編程語言，而是一種用于創建更好更快以及互動性更強的Web應用程式的技術，
在2005年，Google通過其Google Suggest使得AJAX變得流行起來，
Google Suggest使用Ajax創造出動態性極強的web界面：當我們在搜索欄輸入關鍵字的時候，JavaScript就會把這些字符發送到服務器，然后服務器會回傳一個搜索建議的串列，和我們國內的百度的搜索欄一樣，
傳統的網頁(即不用ajax技術的網頁)，想要更新內容或者提交一個表單，都需要重新加載整個網頁，
使用ajax技術的網頁，通過在后臺服務器進行少量的資料交換，就可以實作異步區域更新，
使用Ajax，用戶可以創建接近本地桌面應用的直接、高可用、更豐富、更動態的Web用戶界面，增強B/S的體驗性，
再提一下B/S：未來的主流，并且會爆發式的持續增長，以后我們的電腦可能只需要有一個瀏覽器即可，
現在的產品鏈就是H5+網頁+客戶端+手機端（Android，IOS)+小程式，
利用AJAX可以做:
- 注冊時，輸入用戶名自動檢測用戶是否已經存在，
- 登陸時，提示用戶名密碼錯誤，
- 洗掉資料行時，將行ID發送到后臺，后臺在資料庫中洗掉，資料庫洗掉成功后，在頁面DOM中將資料行也洗掉，
我們可以使用前端的一個標簽來偽造一個ajax的樣子，iframe標簽，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>偽造Ajax</title>
</head>
<body>
<script type="text/javascript">
function loadPage() {
var targetURL = document.getElementById ('url').value;
document.getElementById('iframePosition').src = https://www.cnblogs.com/Plokit/p/targetURL;
}
</script>
請輸入要加載的地址:
之后當我們點擊提交后 效果如圖：
但這也只是偽造的Ajax，
純JS實作Ajax我們不去了解， 這里直接使用jquery提供的，更方便學習，避免重復造輪子，有興趣的同學可以去了解下本質XMLHttpRequest
Ajax的核心是XMLHttpRequest物件(XHR)，XHR為向服務器發送請求和決議服務器回應提供了介面，能夠以異步方式從服務器獲取新資料，
jQuery提供多個與AJAX有關的方法，
通過jQuery AJAX方法，能夠使用HTTP Get和HTTP Post 從遠程服務器上請求文本、HTML、XML或JSON，同時能夠把這些外部資料直接載入網頁的被選元素中，
jQuery不是生產者，而是大自然搬運工，
jQuery Ajax本質就是XMLHttpRequest，對他進行了封裝，方便呼叫！
我們看下它的方法：
1.jQuery.get (...)
所有引數:
url:待載入頁面的URL地址
data:待發送 Key/value 引數，
success:載入成功時回呼函式
dataType:回傳內容格式，xml, json, script,text, html
2.jQuery.post(...)
所有引數:
url:待載入頁面的URL地址
data:待發送 Key/value 引數
success:載入成功時回呼函式
dataType:回傳內容格式，xml, json, script, text,html
3.jQuery.getJSON(...)
所有引數:
url:待載入頁面的URL地址
data:待發送Key/value引數
success:載入成功時回呼函式
4.jQuery.getscript (...)
所有引數:
url:待載入頁面的URL地址
data:待發送Key/value 引數
success:載入成功時回呼函式
5.jQuery.ajax (...)
部分引數:
url:請求地址
type:請求方式，GET、POST (1.9.0之后用method)
headers:請求頭
data:要發送的資料
contentType:即將發送資訊至服務器的內容編碼型別
async:是否異步
timeout:設定請求超時時間（毫秒）
beforeSend:發送請求前執行的函式(全域)
complete:完成之后執行的回呼函式(全域)
success:成功之后執行的回呼函式(全域)
error:失敗之后執行的回呼函式(全域)
accepts:通過請求頭發送給服務器，告訴服務器當前客戶端接收的資料型別
dataType:將服務器端回傳的資料轉換成指定型別
"xml":將服務器端回傳的內容轉換成xml格式
"text":將服務器端回傳的內容轉換成普通文本格式
"html":將服務器端回傳的內容轉換成普通文本格式，在插入DOM中時如果包含JavaScript標簽，則會嘗試去執行，
"script":嘗試將回傳值當作Javascript去執行，然后再將服務器端回傳的內容轉換成普通文本格式
"json":將服務器端回傳的內容轉換成相應的JavaScript物件
"jsonp": JSONP格式使用JSONP 形式呼叫函式時，如“myurl? callback=?" jQuery 將自動替換?為正確的函式名，以執行回呼函式
//第5個里面我們最常用的還是url，data，success 其他的簡單了解即可
使用jQuery需要先匯入它的包，我們可以去到官網下載我們的jQuery庫
之后我們可以在我們工程的webapp目錄下新建一個statics的檔案夾，其中存放我們的靜態資源，（有的工程中也叫做resources），其中再建一個js的檔案夾，將我們剛下載的jQuery的庫放進去，
我們在controller包中將新建一個AjaxController,給他加上注解和總映射
@Controller
@RequestMapping("/ajax")
通過這個我們了解下幾個常用的使用方法，
第一種方式，服務器要回傳一個字串，直接使用response
@RequestMapping("/a1")
public void ajax1(String name,HttpServletResponse response) throws IOException {
if("admin".equals(name)) {
response.getWriter().print(true);
}else {
response.getWriter().print(false);
}
}
創建前端的一個簡單的jsp頁面test1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<%--要是jQuery.需要匯入,注意點:路徑問題--%>
<script src="https://www.cnblogs.com/Plokit/p/${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"/></script>
</head>
<body>
<script type="text/javascript">
function a1(){//將文本框輸出的值發給服務器再接收服務器回傳的值，
//所有引數:
// url:待載入頁面的URL地址
// data:待發送Key/value引數
// success:載入成功時回呼函式
// (data:封裝了服務器回傳的資料，status:狀態 一般為true)
$.ajax({
url:"${pageContext.request.contextPath}/ajax/a1",
data:{'name':$("#txtName").val()},
success:function(data){
console.log(data);
console.log(status)
}
});
}
</script>
<%--onblur失去焦點產生事件--%>
用戶名:
<input type="text" id="txtName" onblur="a1()">
</body>
</html>
之后我們在對應的jsp頁面上輸入admin時，之后將我們的滑鼠焦點轉移他就會像服務器發送name=admin的資訊，之后服務端就會回傳資料，并列印在console上，
Ajax默認的是get請求，我們可以在使用它的type引數將其改成post，不過我們一般直接將$.ajax換成$.post
第二種，我們回傳一個Json字串
@RequestMapping("/a2")
@ResponseBody
public List<User> ajax2() {
List<User> list = new ArrayList<User>();
list.add(new User("張三",20,"男"));
list.add(new User("李四",20,"女"));
list.add(new User("趙五",18,"男"));
return list; //由于加了@ResponseBody注解，默認回傳字串
}
默認的回傳就是json字串，當然我們也可以用我們之前封裝的json工具類去回傳，
我們可以再創建一個jsp的界面測驗一下
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://www.cnblogs.com/Plokit/p/${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"/></script>
</head>
<body>
<script>
$(function() {
$("#btn").click( function (){
$.post("${pageContext.request.contextPath}/ajax/a2" , function (data){
console.log(data) ;
var html = "";
for (var i=0;i<data.length;i++){
html += "<tr>"
+"<td>"+data[i].name + "</td>"
+"<td>"+data[i].age + "</td>"
+"<td>"+data[i].sex + "</td>" +"</tr>"
}
$ ("#content").html(html);
})
})
})
</script>
<input type="button" id="btn" value="https://www.cnblogs.com/Plokit/p/獲取資料"/>
<table width="80%" align="center">
<tr>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
</tr>
<tbody id="content">
</tbody>
</table>
</body>
</html>
注意我們這里精簡的寫法，這也是我們之后作業中常用的寫法
//精簡的寫法，直接寫上引數url等
$(function() {
$("#btn").click( function (){
$.post("${pageContext.request.contextPath}/ajax/a2", function (data){
//回呼函式
})
})
})
之后到相應得jsp界面，在點擊獲取資料按鈕后，就可以看到資料
用戶登陸驗證案例
在用戶登陸界面，我們輸入用戶名或密碼后，他就會自動檢測我們所輸入的是否是正確的，
創建對應的controller中的方法
@RequestMapping("/a3")
@ResponseBody
public String ajax3(String name,String pwd) {
String msg = "";
if (name!=null) {
if ("admin".equals(name)){
msg = "ok";
}else {
msg ="用戶有誤";
}
}
if(pwd!=null){
if ("123456".equals(pwd)){
msg = "ok";
}else {
msg = "密碼輸入有誤";
}
}
return msg;
}
創建相應的jsp界面，這里面有兩個函式
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://www.cnblogs.com/Plokit/p/${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"/></script>
</head>
<body>
<script>
function a1(){
$.post({
url:"${pageContext.request.contextPath}/ajax/a3",
data:{"name":$("#name").val()},
success: function (data){
if (data.toString()== 'ok') {//資訊核對成功
$ ('#userInfo').css ("color","green") ;
}else {
$('#userInfo').css ("color","red") ;
}
$("#userInfo").html(data);
}
})
}
function a2(){
$.post(
"${pageContext.request.contextPath}/ajax/a3",
{"pwd":$("#pwd").val()},
function (data){
if (data.toString()== 'ok') {//資訊核對成功
$ ('#pwdInfo').css ("color","green") ;
}else {
$('#pwdInfo').css ("color","red") ;
}
$("#pwdInfo").html(data);
})
}
</script>
<p>
用戶名:
<input type="text" id="name" onblur="a1()"/><span id="userInfo"></span>
</p>
<p>
密碼:
<input type="text" id="pwd" onblur="a2()"/><span id="pwdInfo"></span>
</p>
</body>
</html>
之后用戶在我們的界面上就可以實作異步互動了，現在很多網頁都是這樣異步實作的，
總結
使用jQuery需要匯入jQuery，使用Vue就匯入Vue，兩個都不用，自己原生態實作，
三步曲
- 撰寫對應處理的Controller，回傳訊息或者字串或者json格式的資料;
- 撰寫ajax請求
- url : Controller請求
- data :鍵值對
- success:回呼函式
- 給Ajax系結事件: 點擊.click，失去焦點onblur，鍵盤彈起 keyup
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/253885.html
標籤：jQuery