Ajax
AjAX=Asynchronous javaScript and XML(異步的javaScript和XML)。
Ajax不是一種新的編程語言，而是一種用於創建更好更快以及交互性更強的Web應用程序的技術
C/S
增加B/S的體驗性
B/S：未來的主流，並且會爆發式的持續增長；
H5+網頁+客戶端+手機端
使用JQuery需要先導入jQuery的js文件；
@Controller
@RequestMapping("/ajax")
public class AjaxController{
//第一種方式，服務器要返回一個字符串，直接使用response
@RequestMapping("/a1")
public void ajax(String name,HttpServletResponse response){
if("admin".equals(name)){
response.getWriter().print("true");
}else{
response.getWriter().print("false");
}
}
}
@RequestMapping("/a2")
@ResponseBody
public List<User> ajax2(){
List<User> list =new ArrayList<>();
User user1 =new User("豪",1,"男");
User user2=new User("豪",1,"男");
list.add(user1);
list.add(user2);
return list; //由於加了@ResponseBody注解，他會返回一個字符串
}
ajax 寫法
<script type="text/javascript">
function a1() {
//所有參數：
//url:待載入頁面的URL地址，Json
//data:待發送Key/value參數
//success:載入成功時回調函數
//data：封裝了服務器返回的數據
//status：狀態
$.ajax({
url:"${pageContext.request.contextPath}/ajax/a1",
data:{"name":$("txtName").val()},
success:function (data,status) {
console.log(data)
console.log(status)
}
});
//將文本輸入的值，
$("txtName").val();
// //發送給服務器，
// //接受服務器返回的數據
}
<script>
$(function(){
$("#btn").click(function(){
$.post("${pageContest.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>
第三種
@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;
}
<html>
<head>
<title>Title</title>
<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>
</head>
<body>
<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>
Ajax 總結：
使用jQuery需要導入JQuery，使用Vue就導入Vue，兩個都用，自己原生態實現
三步曲：
1.編寫對應處理的Controller,返回消息或者字符串匯總json格式的數據
2.編寫ajax請求
1.url: Controller 請求
2.data： 鍵值對
3 . SUCCESS: 回調函數
3.給Ajax綁定事件，點擊click，失去焦點onblur,鍵盤彈起keyup