1.Ajax
Ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML）梦鉴，是指一種創(chuàng)建交互式、快速動態(tài)網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)规辱，無需重新加載整個(gè)網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)栽燕。
1.1.為什么會出現(xiàn)Ajax技術(shù)?
因?yàn)閭鹘y(tǒng)的網(wǎng)頁技術(shù)罕袋，存在諸多不足，每次頁面要進(jìn)行刷新時(shí)碍岔，需要重新加載整個(gè)頁面浴讯，這樣會導(dǎo)致瀏覽器需要重新解析所有的頁面數(shù)據(jù)，頁面中原有的數(shù)據(jù)付秕，不需要重新解析渲染的也會丟失兰珍，服務(wù)器，也需要構(gòu)建整個(gè)頁面的數(shù)據(jù)询吴。這樣增加了服務(wù)器掠河，帶寬，瀏覽器的壓力猛计，且用戶體驗(yàn)比較差唠摹，因?yàn)閿?shù)據(jù)的更新是無差別的，需要更新的或者不需要更新的奉瘤，整個(gè)網(wǎng)頁數(shù)據(jù)都會更新勾拉。這樣可能導(dǎo)致用戶的某些不需要更新的行為數(shù)據(jù)，沒重置了盗温，用戶需要重新輸入且用戶不知道被刷新的原因藕赞。基于這點(diǎn)，需要根據(jù)需求卖局，可選的改變網(wǎng)頁上的數(shù)據(jù).這種改變網(wǎng)頁上的數(shù)據(jù)斧蜕，是只改變網(wǎng)頁上的部分?jǐn)?shù)據(jù)，這樣做砚偶，服務(wù)器需要構(gòu)建的數(shù)據(jù)批销，相對少，傳輸?shù)臄?shù)據(jù)也少染坯，瀏覽重新解析渲染的壓力也小均芽。這種方法就被稱之為局部刷新。
傳統(tǒng)網(wǎng)頁交互的不足.png
1.2.Ajax技術(shù)的原理
為了彌補(bǔ)傳統(tǒng)的不足单鹿，需要可選的改變網(wǎng)頁部分?jǐn)?shù)據(jù)掀宋，而改變網(wǎng)頁的數(shù)據(jù)的依據(jù)需要從服務(wù)器獲取，那么瀏覽器就需要與服務(wù)器交互仲锄。就是瀏覽器需要發(fā)送請求給服務(wù)器劲妙，但是瀏覽器沒辦法可選的修改網(wǎng)頁數(shù)據(jù)，網(wǎng)頁數(shù)據(jù)屬于DOM元素昼窗，需要使用網(wǎng)頁腳本語言進(jìn)行修改是趴。所以基于這點(diǎn)，開發(fā)者讓瀏覽器廠商提供了發(fā)送請求的API澄惊，通過Javascript唆途，利用瀏覽器向服務(wù)器發(fā)送請求，且接收服務(wù)器的響應(yīng)數(shù)據(jù)掸驱，然后根據(jù)響應(yīng)作為更新頁面的依據(jù)肛搬。從而實(shí)現(xiàn)了頁面局部刷新的效果，這種技術(shù)就是Ajax技術(shù)毕贼。由于温赔，此時(shí)瀏覽器與服務(wù)器的交互是在后臺的進(jìn)行交互的，所以這種交互方式也被稱之為異步交互鬼癣。Ajax技術(shù)就是一種異步交互陶贼。其原理啤贩，本質(zhì)上就是Javascript利用瀏覽器，在后臺與服務(wù)交互數(shù)據(jù)拜秧，然后根據(jù)痹屹，利用Javascript的DOM的API，進(jìn)行頁面更新枉氮。
1.3.如何使用Ajax技術(shù)?
一般Ajax技術(shù)分為原生的Ajax技術(shù)或者第三方封裝的Ajax技術(shù)志衍。
原生的Ajax是指使用Javascript最原始的API與服務(wù)器進(jìn)行交互。
原生Ajax:
XMLHttpRequest:是瀏覽器內(nèi)置用于發(fā)送請求的對象聊替，用于在后臺與服務(wù)器交換數(shù)據(jù)楼肪。
注意：
-
所有現(xiàn)代瀏覽器（IE7+、Firefox惹悄、Chrome春叫、Safari 以及 Opera）均內(nèi)建 XMLHttpRequest 對象。
使用：new XMLHttpRequest();
-
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：
使用： new ActiveXObject("Microsoft.XMLHTTP");
以上說明XMLHttpRequest對象存在瀏覽器的兼容性問題.
核心方法：
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 規(guī)定請求的類型俘侠、URL 以及是否異步處理請求象缀。 method：請求的類型；GET 或 POST url：文件在服務(wù)器上的位置 async：true（異步）或 false（同步） |
| send(string) | 將請求發(fā)送到服務(wù)器爷速。string：僅用于 POST 請求 |
| setRequestHeader(header,value) | 向請求添加 HTTP 頭央星。 header: 規(guī)定頭的名稱 value: 規(guī)定頭的值 |
事件：
onreadystatechange : 當(dāng)瀏覽器與服務(wù)器的通信狀態(tài)發(fā)生變化時(shí)就會觸發(fā)該事件。
屬性:
| 屬性 | 描述 |
|---|---|
| onreadystatechange | 存儲函數(shù)（或函數(shù)名）惫东，每當(dāng) readyState 屬性改變時(shí)莉给，就會調(diào)用該函數(shù)。 |
| readyState | 存有 XMLHttpRequest 的狀態(tài)廉沮。 從 0 到 4 發(fā)生變化颓遏。 0: 請求未初始化 1: 服務(wù)器連接已建立 2: 請求已接收 3: 請求處理中 4: 請求已完成，且響應(yīng)已就緒 |
| status | 200: "OK" 404: 未找到頁面 |
響應(yīng)屬性：
根據(jù)以下屬性滞时，可以從請求中獲取服務(wù)器響應(yīng)的數(shù)據(jù)
| 屬性 | 描述 |
|---|---|
| responseText | 獲得字符串形式的響應(yīng)數(shù)據(jù)叁幢。 |
| responseXML | 獲得 XML 形式的響應(yīng)數(shù)據(jù)。 |
注意：
ajax的響應(yīng)數(shù)據(jù)只能是responseText或者responseXML坪稽，即Ajax的響應(yīng)數(shù)據(jù)只能是字符串曼玩。
1.3.1.原生Ajax的使用
- 創(chuàng)建發(fā)送請求的對象
- 監(jiān)聽請求對象狀態(tài)
- 根據(jù)狀態(tài)解析響應(yīng)數(shù)據(jù)
- 準(zhǔn)備發(fā)送請求信息
- 發(fā)送請求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用Ajax與服務(wù)器交互</title>
</head>
<body>
<div id="divId"></div>
<button id="btn" onclick="sendAjax()">按鈕</button>
<script type="text/javascript">
//1. 創(chuàng)建請求對象
var reuqest = new XMLHttpRequest();
//發(fā)送ajax請求
function sendAjax() {
//2. 為對象添加監(jiān)聽事件
reuqest.onreadystatechange = function() {
console.log("狀態(tài)發(fā)生了變化");
//接收響應(yīng)數(shù)據(jù)
//當(dāng)請求正常 且 響應(yīng)完成時(shí)接收
console.log(reuqest.readyState);
//只有當(dāng)請求響應(yīng)完成 且請求正常時(shí) 才接收數(shù)據(jù)
if (reuqest.readyState == 4 && reuqest.status == 200) {
//獲取響應(yīng)中的字符串?dāng)?shù)據(jù)
var msg = reuqest.responseText;
console.log(msg);
document.getElementById("divId").innerText = msg;
}
}
var param = "name=張三&age=18"
//3. 準(zhǔn)備發(fā)送請求 建立連接
//reuqest.open("get","ajax.do?"+param,true);
//reuqest.send(param);
reuqest.open("post", "ajax.do?" + param, true);
//4. 發(fā)送請求
reuqest.send(param);
}
</script>
</body>
</html>
package com.sxt.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ajax.do")
public class AjaxController extends HttpServlet {
private static final long serialVersionUID = -116354998836682953L;
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//設(shè)置編碼避免漢字亂碼
resp.setCharacterEncoding("UTF-8");
resp.setContentType("charset=UTF-8");
//接收ajax 參數(shù)
String name = req.getParameter("name");
String age = req.getParameter("age");
System.out.println(name+" "+age);
System.out.println("有人請求了!!");
//向ajax返回?cái)?shù)據(jù)
PrintWriter writer = resp.getWriter();
//注意 使用print 不要使用println
writer.print("請求成功");
writer.flush();
}
}
1.3.2.jquery中的ajax
由于原生ajax的API使用相對繁瑣，且對瀏覽器的兼容性相對較差窒百∈蚺校基于這個(gè)原因，jquery插件篙梢，對原生ajax的API進(jìn)行了二次封裝顷帖，降低了ajax使用的難度，簡化了ajax開發(fā)的步驟。
在jquery中贬墩，ajax提供如下核心方法：
| 方法名 | 說明 |
|---|---|
| ajax(option) | 就是進(jìn)行ajax請求榴嗅，最接近原生ajax的方法 |
| post(option) | 只支持post請求的ajax方法 |
| get(option) | 只支持get請求的ajax方法 |
| load(option) | 將ajax請求的數(shù)據(jù)加載到dom中 |
jquery中Ajax相關(guān)函數(shù)：
| 函數(shù) | 描述 |
|---|---|
| jQuery.ajax() | 執(zhí)行異步 HTTP (Ajax) 請求。 |
| .ajaxComplete() | 當(dāng) Ajax 請求完成時(shí)注冊要調(diào)用的處理程序震糖。這是一個(gè) Ajax 事件录肯。與具體的ajax中complete一致 |
| .ajaxError() | 當(dāng) Ajax 請求完成且出現(xiàn)錯(cuò)誤時(shí)注冊要調(diào)用的處理程序趴腋。這是一個(gè) Ajax 事件吊说。與具體的error一致 |
| .ajaxSend() | 在 Ajax 請求發(fā)送之前顯示一條消息。與具體的ajax請求中beforeSend一致 |
| jQuery.ajaxSetup() | 設(shè)置將來的 Ajax 請求的默認(rèn)值优炬。進(jìn)行全局設(shè)置颁井，所有ajax的操作，都會遵循該設(shè)置 |
| .ajaxStart() | 當(dāng)首個(gè) Ajax 請求完成開始時(shí)注冊要調(diào)用的處理程序蠢护。這是一個(gè) Ajax 事件雅宾。 |
| .ajaxStop() | 當(dāng)所有 Ajax 請求完成時(shí)注冊要調(diào)用的處理程序。這是一個(gè) Ajax 事件葵硕。 |
| .ajaxSuccess() | 當(dāng) Ajax 請求成功完成時(shí)顯示一條消息眉抬。 |
| jQuery.get() | 使用 HTTP GET 請求從服務(wù)器加載數(shù)據(jù)。 |
| jQuery.getJSON() | 使用 HTTP GET 請求從服務(wù)器加載 JSON 編碼數(shù)據(jù)懈凹。 |
| jQuery.getScript() | 使用 HTTP GET 請求從服務(wù)器加載 JavaScript 文件蜀变，然后執(zhí)行該文件。 |
| .load() | 從服務(wù)器加載數(shù)據(jù)介评，然后把返回到 HTML 放入匹配元素库北。 |
| jQuery.param() | 創(chuàng)建數(shù)組或?qū)ο蟮男蛄谢硎荆m合在 URL 查詢字符串或 Ajax 請求中使用们陆。 |
| jQuery.post() | 使用 HTTP POST 請求從服務(wù)器加載數(shù)據(jù)寒瓦。 |
| .serialize() | 將表單內(nèi)容序列化為字符串。 |
| .serializeArray() | 序列化表單元素坪仇，返回 JSON 數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)杂腰。 |
option:ajax請求的相關(guān)參數(shù)
| 參數(shù)名 | 值類型 | 說明 |
|---|---|---|
| async | Boolean | 默認(rèn)值: true。默認(rèn)設(shè)置下椅文，所有請求均為異步請求喂很。如果需要發(fā)送同步請求，請將此選項(xiàng)設(shè)置為 false雾袱。 |
| beforeSend | Function | 發(fā)送請求前可修改 XMLHttpRequest 對象的函數(shù)恤筛，如添加自定義 HTTP 頭。 |
| cache | Boolean | 默認(rèn)值: true芹橡，dataType 為 script 和 jsonp 時(shí)默認(rèn)為 false毒坛。設(shè)置為 false 將不緩存此頁面。 |
| complete | Function | 請求完成后回調(diào)函數(shù) (請求成功或失敗之后均調(diào)用)。 |
| contentType | String | 默認(rèn)值: "application/x-www-form-urlencoded"煎殷。發(fā)送信息至服務(wù)器時(shí)內(nèi)容編碼類型屯伞。 |
| context | Object | 這個(gè)對象用于設(shè)置 Ajax 相關(guān)回調(diào)函數(shù)的上下文。 |
| data | String | 發(fā)送到服務(wù)器的數(shù)據(jù)豪直。 |
| dataFilter | Function | 給 Ajax 返回的原始數(shù)據(jù)的進(jìn)行預(yù)處理的函數(shù)劣摇。提供 data 和 type 兩個(gè)參數(shù)：data 是 Ajax 返回的原始數(shù)據(jù)，type 是調(diào)用 jQuery.ajax 時(shí)提供的 dataType 參數(shù)弓乙。函數(shù)返回的值將由 jQuery 進(jìn)一步處理末融。 |
| dataType | String | 預(yù)期服務(wù)器返回的數(shù)據(jù)類型. "xml": 返回 XML 文檔 "html": 返回純文本 HTML 信息 "script": 返回純文本 JavaScript 代碼。 "json": 返回 JSON 數(shù)據(jù) 暇韧。 "jsonp": JSONP 格式勾习。 "text": 返回純文本字符串 |
| error | Function | 有以下三個(gè)參數(shù)：XMLHttpRequest 對象、錯(cuò)誤信息懈玻、（可選）捕獲的異常對象巧婶。當(dāng)ajax發(fā)生錯(cuò)誤時(shí)調(diào)用 |
| global | Boolean | 是否觸發(fā)全局 AJAX 事件。默認(rèn)值: true涂乌。 |
| success | Function | 請求成功后的回調(diào)函數(shù)艺栈。參數(shù)：由服務(wù)器返回，并根據(jù) dataType 參數(shù)進(jìn)行處理后的數(shù)據(jù)湾盒； |
| timeout | Number | 設(shè)置請求超時(shí)時(shí)間（毫秒）湿右。 |
| type | String | 提交方式 GET POST DELETE PUT 等等 |
| url | String | 默認(rèn)值: 當(dāng)前頁地址。發(fā)送請求的地址历涝。 |
API示例1：ajax基本請求參數(shù)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery-ajax配置項(xiàng)API</title>
</head>
<body>
<button id="btn1">jquery最基本的ajax請求</button>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//為按鈕綁定事件
$("#btn1").click(function(){
//請求的配置項(xiàng) 請求的參數(shù)
var option = {
url:"ajax.do",//請求的URL地址
type:"get",//請求方法
data:{'name':'韓梅梅','age':18}, //請求參數(shù)
timeout:5000, //請求超時(shí)時(shí)間 單位毫秒 如果超出這個(gè)時(shí)間 則終止請求 觸發(fā)error函數(shù)
error:function(req,msg,exception){//請求出現(xiàn)異常時(shí)調(diào)用的方法
console.log(req);
console.log(msg);
console.log(exception);
},
success:function(rs){//請求成功時(shí)調(diào)用的方法 響應(yīng)碼是 200
console.log("返回的數(shù)據(jù)是:"+rs);
},
complete:function(req,msg){//每次請求完成都會調(diào)用 不論成功還是失敗
console.log("complete:"+req);
console.log("complete:"+msg);
}
};
//進(jìn)行ajax請求
$.ajax(option);
});
</script>
</body>
</html>
AJax請求相關(guān)參數(shù)： 非常用參數(shù)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery-ajax配置項(xiàng)API</title>
</head>
<body >
<button id="btn1">jquery最基本的ajax請求</button><br>
<button id="btn2">jquery最非常用屬性介</button>
<img src="img/loading.gif" id="loading" style="width: 100px;height: 100px;display: none" />
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//jquery ajax 非常用屬性介紹
$("#btn2").click(function(){
var option = {
url:"ajax.do",
type:"get",
async:true,// 是否進(jìn)行異步請求 默認(rèn)是 true 如果需要同步請求 則為false
//如果ajax是異步請求,那么不管ajax相關(guān)代碼是否執(zhí)行完,ajax之后的代碼都會執(zhí)行
//如果ajax是同步請求,那么只有當(dāng)ajax相關(guān)代碼執(zhí)行完,ajax之后的代碼才會執(zhí)行
//如果ajax相關(guān)數(shù)據(jù) 參與ajax之后的代碼運(yùn)算,建議使用同步請求
beforeSend:function(XHR){//進(jìn)行ajax請求前調(diào)用的函數(shù) 此時(shí) 只屬于當(dāng)前ajax請求
//設(shè)置請求頭
$("#loading").show();
},
context:document.body,// 指定ajax中的this 對象
dataType:"json",// ajax 期望的返回?cái)?shù)據(jù)的格式類型 如果返回的數(shù)據(jù) 無法轉(zhuǎn)化為期望格式類型,程序會報(bào)錯(cuò) ,chrome看不到
dataFilter:function(data,type){//為ajax 返回的原始數(shù)據(jù)進(jìn)行預(yù)處理的函數(shù)
//根據(jù) type 的值 將data 原始數(shù)據(jù)進(jìn)行預(yù)處理
//原始數(shù)據(jù)都默認(rèn)普通字符串 將字符串轉(zhuǎn)化為json對象
//data 內(nèi)容 : 請求成功 普通字符串
console.log(data);
console.log(type);
var obj = new Object();
if(type == "json"){
obj.msg = data;
}
//此時(shí)打印的是js 對象
console.log(obj); //現(xiàn)在js 對象 根json 規(guī)范一樣
//轉(zhuǎn)化為json 對象
//將 js 對象轉(zhuǎn)化為 json 對象
var jsonObj = $.parseJSON('{"msg":"請求成功"}');
//此時(shí)打印的json 對象
//console.log(jsonObj);
return JSON.stringify(jsonObj);
// 拼接成了 json 字符串 jquery 對這個(gè)字符串進(jìn)行轉(zhuǎn)化
//然后 轉(zhuǎn)化后的結(jié)果 返回 success 方法 當(dāng)做參數(shù)
},
success:function(rs){//請求成功時(shí)調(diào)用的方法 響應(yīng)碼是 200
//rs.msg ---- rs 是一個(gè)對象
console.log("返回的數(shù)據(jù)是:"+rs.msg);
//例如: success 里面做了多個(gè)dom的操作 根據(jù)數(shù)據(jù)生成dom
//而ajax 之后代碼有相關(guān)關(guān)聯(lián)的dom操作,則容易程序異常問題
$(this).attr("bgcolor","red");
},
complete:function(req,msg){//每次請求完成都會調(diào)用 不論成功還是失敗
$("#loading").hide();
}
};
//進(jìn)行ajax請求
$.ajax(option);
//進(jìn)行dom 相關(guān)操作 獲取 success 生成的dom
})
</script>
</body>
</html>
Ajax中的方法示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery ajax 中的方法介紹</title>
</head>
<body>
<form id="form1">
名稱:<input name="name"/><br>
年齡:<input name="age" />
<input type="button" id="subBtn1" value="提交" />
</form>
<img src="img/loading.gif" id="loading" style="width: 100px;height: 100px;display: none" />
<button id="btn1" >獲取表單數(shù)據(jù)</button>
<button id="btn2" >get發(fā)送ajax請求</button>
<button id="btn3" >post發(fā)送ajax請求</button>
<button id="btn4" >getJSON</button>
<button id="btn5" >load</button><br>
<h1>ajax2.html中</h1>
<div id="content"></div>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//ajax 的全局設(shè)置
//只要進(jìn)行了全局設(shè)置 所有的 ajax 請求都會觸發(fā)相關(guān)設(shè)置的方法
/* $.ajaxSetup({
beforeSend:function(req){
// 在 前端后分離的項(xiàng)目中 此時(shí)可以在beforeSend中統(tǒng)一設(shè)置請求頭
console.log("請求前");
},
dataFilter:function(data,type){
//統(tǒng)一進(jìn)行數(shù)據(jù)攔截
//例如 : 如果數(shù)據(jù)不符合規(guī)范 則 進(jìn)行某些業(yè)務(wù)處理
},
complete:function(req,rs){
console.log("請求完成");
}
}); */
//獲取表單數(shù)據(jù) 便于 ajax 進(jìn)行提交
$("#btn1").click(function(){
$(document).ajaxStart(function(){
console.log("ajax 開始請求");
});
$(document).ajaxStop(function(){
console.log("ajax 結(jié)束請求");
});
//獲取表單中數(shù)據(jù) 序列化為表單格式的字符串
var data = $("#form1").serialize();
console.log(data);
data = $("#form1").serializeArray();
console.log(data);
$.ajax({
url:"ajax.do",
success:function(rs){
console.log(rs);
}
});
});
// ajax 中 get 和 post
//為了簡化 ajax 開發(fā) jquery 提供了 get 和 post 兩個(gè)方法
//這兩個(gè)方法
/*
url : 請求地址
param : 請求參數(shù)
function(rs){}: 請求成功后的回調(diào)函數(shù)
$.get(url,param,function(rs){});
$.post(url,param,function(rs){});
get 和 post 方法中的ajax 配置都使用的是默認(rèn)配置
注意: 使用 get 和 post 獲取的ajax 數(shù)據(jù) 是原始數(shù)據(jù) 數(shù)據(jù)類型由服務(wù)器決定 jquery 不會對數(shù)據(jù)做處理
*/
//使用 get 方法 發(fā)送ajax 請求
$("#btn2").click(function(){
$.get("ajax.do",{'name':'韓梅梅','age':18},function(rs){
console.log(rs);
});
});
//使用post 方法 發(fā)送ajax請求
$("#btn3").click(function(){
$.post("ajax.do",{'name':'李磊','age':18},function(rs){
console.log(rs);
});
});
//獲取json 格式數(shù)據(jù) getJSON 指定返回的數(shù)據(jù)類型是json類型
$("#btn4").click(function(){
$.getJSON("json.do",function(rs){
console.log(rs);
});
});
//.load() 從服務(wù)器加載數(shù)據(jù)诅需，然后把返回到 HTML 放入匹配元素。
$("#btn5").click(function(){
$("#content").load("load.do");
});
</script>
</body>
</html>
注意：
-
在jQuery 1.9后荧库，全局Ajax事件（ajaxStart, ajaxStop, ajaxSend, ajaxComplete, ajaxError, ajaxSuccess）只在document節(jié)點(diǎn)上觸發(fā).
只能：$(document).ajaxStart(...)
-
在javascript中：
- 將json字符串轉(zhuǎn)化為json對象：JSON.parse(str) 或者 $.parseJSON(str) evel
- 將對象轉(zhuǎn)化為JSON字符串 ：JSON.stringify(obj)
1.4.案例
1.4.1.ajax登錄案例
- 使用js獲取表單數(shù)據(jù)
- 服務(wù)器獲取ajax提交的數(shù)據(jù)根據(jù)數(shù)據(jù)做出相應(yīng)的響應(yīng)數(shù)據(jù)
- js獲取響應(yīng)數(shù)據(jù)堰塌，做出相應(yīng)的反映
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登錄</title>
</head>
<body>
<!-- 此時(shí)使用ajax form中 無需指定action method 等等 -->
<form >
<p>用戶名:<input type="text" id="userName" name="userName" /> </p>
<p>密碼:<input type="text" id="password" name="password" /></p>
<p><span id="errorInfo" style="color:red"></span></p>
<!-- 此時(shí) 提交表單數(shù)據(jù) 使用 js提交 所以 一定不要使用submit -->
<input type="button" value="提交" id="subBtn"/>
</form>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("#subBtn").click(function(){
var userName = $("#userName").val();
if(userName == null || userName == ''){
$("#errorInfo").text("用戶名不能為空");
//阻止后面的js 執(zhí)行
return false;
}
var password = $("#password").val();
if(password == null || password == ''){
$("#errorInfo").text("密碼不能為空");
//阻止后面的js 執(zhí)行
return false;
}
var param = {
'service':'login',
'userName':userName,
'password':password
};
//提交數(shù)據(jù)給服務(wù)器
$.post("user.do",param,function(rs){
//對rs 響應(yīng)數(shù)據(jù)進(jìn)行解析
//如果rs 表示是成功 則 可以跳轉(zhuǎn)到 登錄成功的頁面
//如果rs 表示是失敗 則 將失敗原因 顯示在頁面
// 服務(wù)器中返回的數(shù)據(jù) code值為 200 時(shí) 才表示正常
// 如果不是200 表示都是異常的 msg 就是異常的原因
//協(xié)議 服務(wù)器返回的數(shù)據(jù)的協(xié)議
console.log(rs);
if(rs.code != 200){
$("#errorInfo").text(rs.msg);
return false;
}
//如果 code 值為 200 說明 用戶名和密碼是正確 進(jìn)行頁面跳轉(zhuǎn)
//需要使用 js 實(shí)現(xiàn) 頁面跳轉(zhuǎn)
location.href = "success.html";
});
});
</script>
</body>
</html>
package com.sxt.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSONObject;
@WebServlet("/user.do")
public class UserController extends HttpServlet {
private static final long serialVersionUID = 7723086583204133716L;
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String service = req.getParameter("service");
if("login".equals(service)) {
login(req,resp);
}
}
/**
* @Title: login
* @author: Mr.T
* @date: 2020年2月19日 下午5:42:20
* @Description: 處理登錄業(yè)務(wù)的方法
* @param req
* @param resp
* @return: void
* @throws IOException
*/
private void login(HttpServletRequest req, HttpServletResponse resp) throws IOException {
String userName = req.getParameter("userName");
String password = req.getParameter("password");
JSONObject rs = new JSONObject();
resp.setCharacterEncoding("UTF-8");
resp.setContentType("json/text;charset=UTF-8");
PrintWriter writer = resp.getWriter();
//校驗(yàn)用戶名 告訴瀏覽器 用戶名錯(cuò)誤
if(!"admin".equals(userName)) {
//業(yè)務(wù)錯(cuò)誤碼
rs.put("code", 4001);
//業(yè)務(wù)錯(cuò)消息
rs.put("msg","用戶名錯(cuò)誤");
//將結(jié)果數(shù)據(jù)返回給瀏覽器
writer.write(rs.toJSONString());
writer.flush();
writer.close();
return;
}
// 校驗(yàn)密碼
if (!"admin".equals(password)) {
// 業(yè)務(wù)錯(cuò)誤碼
rs.put("code", 4002);
// 業(yè)務(wù)錯(cuò)消息
rs.put("msg", "用戶密碼錯(cuò)誤");
// 將結(jié)果數(shù)據(jù)返回給瀏覽器
writer.write(rs.toJSONString());
writer.flush();
writer.close();
return;
}
// 業(yè)務(wù)錯(cuò)誤碼
rs.put("code", 200);
// 業(yè)務(wù)錯(cuò)消息
rs.put("msg", "登錄成功");
// 將結(jié)果數(shù)據(jù)返回給瀏覽器
writer.write(rs.toJSONString());
writer.flush();
writer.close();
return;
}
}
