提交界面jsp
输入用户名时,设置失去焦点事件,调用ajax
这里使用基础的ajax,便于观察json数据在前后端的传输
pagecontext.request.contextpath
首先再记录一下绝对路径pagecontext.request.contextpath的使用
- 相对路径固然比较灵活,但如果想复制页面内的代码却变得比较困难,因为不同的页面具有不同的相对路径,复制后必须修改每一个连接的路径。
- 如果页面被多于一个的页面所包含,那么被包含页面中的相对路径将是不正确的。
- 采用绝对路径,在大部分情况下都可以保证路径绝对正确,但也有一个缺点,操作不便,其他工具无法正确解释${pageContext.request.contextPath} 语句,可采用base标签,<base href="http://${header['host']}${pageContext.request.contextPath}/pages/某某.jsp" />
ajax浅析
后端只负责提供json数据,前端的js和ajax来实现页面的异步提交
2.axios
axios是ajax的一个比较好的框架
axios的一般写法有
1.发送get请求
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 上面的请求也可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
2.发送post请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
尚硅谷axios的小demo
前端页面
controller层