1. 前后端项目分离
整个项目工程可以 分为前端项目和后端项目,前端只需要访问后端接口,就可以拿到json数据。
但前端项目访问后端接口时注意跨域问题。
2. 使用ssm骨架的的web模块
使用ssm_web模块时注意:当html,css,js等静态资源放WEB-INF 文件夹下面时,如果直接使用相对路径访问时,会访问不到。
例如:
index.html 中添加
<a href="content/test.html"><h3>跳转测试页面</h3></a>
原因是:WEB-INF 下面的静态文件得走springMVC,html页面的跳转得走Controller。
如果不想考虑安全性,直接使用页面之间的相对路径访问,操作如下:
在ssm_web 模块的webapp 下面创建存放静态资源的文件夹,如下图所示:
注意:不在WEB-INF 里
因为test.html 不在WEB-INF 下面,所以 index.html可以直接访问test.html
页面想获取后台的json数据,则可以直接在该页面使用ajax 来调用接口
test.html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script type="application/javascript">
$(document).ready(function () {
var bookVO={
bookId: 1
};
$.ajax({
url: "http://localhost:8080/lecture/findBookById",
type: "post",
contentType: "application/json;charset=UTF-8",
data: JSON.stringify(bookVO),
dataType: "json",
success: function (data) {
console.log(data);
if (data.respCode === "0") {
$("#test").html("<pre>"+JSON.stringify(data)+"</pre>" );
} else {
alert("失败");
}
}
});
});
</script>
</head>
<body>
<div id="test">
</div>
</body>
</html>
页面显示效果: