ajax请求简单示例
html示例
<button class="btn btn-lg btn-primary btn-block" id="testAjax">Ajax</button>
<button class="btn btn-lg btn-primary btn-block" id="testJqueryAjax">jqueryAjax</button>
<button class="btn btn-lg btn-primary btn-block" id="testAxiosAjax">axiosAjax</button>
controller
@Controller
public class ajaxController {
@GetMapping("/login")
public String login(){
return "登录";
}
@ResponseBody
@GetMapping("/student/info")
public String info(){
return "原生js发送ajax请求";
}
@ResponseBody
@GetMapping("student/info2")
public String info2(){
return "jquery发送ajax请求";
}
@ResponseBody
@GetMapping("/student/info3")
public String info3(){
return "axios发送ajax请求";
}
}
原生js发ajax请求
<script>
let btn = document.getElementById("testAjax");
btn.onclick = function (){
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if(xhr.readyState == XMLHttpRequest.DONE){
if(xhr.status<200||xhr.status>=300&&xhr.status!==304){
alert("服务器异常");
return;
}
console.log(xhr.responseText);
}
};
xhr.open('GET','/student/info');
xhr.send();
}
</script>
juqery发送
cdn连接
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$("#testJqueryAjax").click(function (){
$.ajax({
url:"/student/info2",
cache:false,
type:"GET",
//async:true,
//contentType:'application/json',
//dateType:"json",
success:function (result){
console.log(result);
}
});
})
</script>
axios发送
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>
let btn2 = document.getElementById("testAxiosAjax");
btn2.onclick=function (){
axios.get("/student/info3")
.then(function(response) {
console.log(response.data);
})
.catch(function(error){
console.log(error);
});
}
</script>