Article Directory
1. What is Ajax technology
- AJAX = Asynchronous JavaScript and XML (Asynchronous JavaScript and XML).
- Ajax is a without having to reload the entire web page technical section of the page can be updated.
- Ajax is not a new programming language, but a technique for creating better, faster and more interactive Web applications.
- Traditional web page (that is, without ajax technology web page), you want to update or submit a form, you need to reload the entire page.
- Ajax web page using technology, by a small amount of data exchange server in the background, you can achieve asynchronous partial update.
The use of Ajax can do:
- When registering, enter your user name automatically detects whether the user already exists.
- When the login prompt the user name and password error
- Delete data rows, row ID will be sent to the background, the background to delete the database, the database is deleted successfully, also remove the page rows of data in the DOM.
…and many more
2. Ajax forgery
You can use the frontiframe tagTo forge a look ajax
1, create a new project, to build web module
2, a write test ajax-frame.html using iframe, the feeling effect
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>zz</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
let myDate = new Date();
document.getElementById('currentTime').innerText = myDate.getTime();
};
function LoadPage(){
let targetUrl = document.getElementById('url').value;
console.log(targetUrl);
document.getElementById("iframePosition").src = targetUrl;
}
</script>
<div>
<p>请输入要加载的地址：<span id="currentTime"></span></p>
<p>
<input id="url" type="text" value="https://www.pku.edu.cn/"/>
<input type="button" value="提交" onclick="LoadPage()">
</p>
</div>
<div>
<h3>加载页面位置：</h3>
<iframe id="iframePosition" style="width: 50%;height: 300px;"></iframe>
</div>
</body>
</html>
3, Tomcat configuration test
can be seen, only partial load the page location area update page, and the remaining area unchanged.
3. Ajax-related test
The following two can achieve Ajax
- jQuery : with more
- axios : VUE recommended axios
As used herein, jquery
1. loses focus (mouse leaves an input field) triggers a request ajax
Page ajax01.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<html>
<head>
<title>Title</title>
<!--注意：script标签不要自闭合-->
<script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
百度：<input type="text" id="baidu" onblur="baidu()">
<script>
function baidu() {
// 失去焦点触发一个ajax请求
alert("ajax请求")
}
</script>
</body>
</html>
Test
the mouse to click the input box, and then moved away from the input box loses focus
2. loses focus trigger an ajax request to return back ok, display test is successful
Control class AjaxController
package com.zz.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class AjaxController {
@RequestMapping("/a2")
public String ajax(String name){
System.out.println(name);
return "ok";
}
}
Page ajax02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
百度：<input type="text" name="name" id="baidu" onblur="baidu()">
<script>
function baidu(){
// 失去焦点触发一个ajax请求
$.post({
url:'/a2',
data:{name:$("#baidu").val()},
//成功的回调函数
success:function (data,status) {
console.log(data)
console.log(status)
}
});
}
</script>
</body>
</html>
test
3. loses focus trigger an ajax request to return a collection of background objects
Control class AjaxController
@RequestMapping("/aj2")
public List<User> ajax2(String name){
User user1 = new User("铁牛1", 18, "女");
User user2 = new User("铁牛2", 18, "男");
User user3 = new User("铁牛3", 18, "女");
User user4 = new User("铁牛4", 18, "男");
User user5 = new User("铁牛5", 18, "女");
User user6 = new User("铁牛6", 18, "男");
List<User> users = Arrays.asList(user1, user2, user3, user4, user5, user6);
return users;
}
At the same time the page ajax02.html the address change / aj2
test
4. a trigger event, data is echoed to the front-end interface
Page ajax03.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<input type="button" id="btn" value="点击"/>
<table width="70%" border="1px" align="center">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tbody id="content">
<!--应该从后台自动刷新数据过来-->
</tbody>
</table>
<script>
$('#btn').click(function(){
//post(url,data,success的回调函数)
$.post("/aj2",function (data){
console.log(data);
//基本的dom操作
let html="";
for (let 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>
</body>
</html>
test
