bug report
- CORS Error: “requests are only supported for protocol schemes: http…”
etc
在前端JS代码中连接忘记加入http
$(document).ready(function () {
$.ajax(
//这里请加入http前缀
{url:"http://localhost:8080/clientConsuming"}
).then(function(data){
$(".userid").append(data.userid);
$(".username").append(data.name);
});
});
Spring boot切换端口
CLI
java -jar -Dserver.port=8081 demo-0.0.1-SNAPSHOT.jar
Prerequisites
- web-starter的Spring boot依赖
- JDK 8+
Project Structure
Code Snippet
User类就是一个POJO:
public class User {
private int userid;
private String name;
//setter 和 getter省略
}
写一个产生JSON格式的控制器:
@RestController
public class JSONTransController {
@GetMapping("/clientConsuming")
public User getUser(){
User user=new User();
user.setUserid(1);
user.setName("oneslide");
return user;
}
}
运行一下,查看一下产生的格式默认为JSON格式:
写一个JS代码消费这个JSON数据,或打印到JS控制台或者写到DOM文档树上
$(document).ready(function () {
$.ajax(
{url:"http://localhost:8080/clientConsuming"}
).then(function(data){
//data.*一定要和产生的数据格式同名
$(".userid").append(data.userid);
$(".username").append(data.name);
});
});
H5页面
<!DOCTYPE html>
<html>
<head>
<title>Hello jQuery</title>
//在线Jquery库,此代码转载自Spring Boot官网Starter Guide
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/clientConsuming.js"></script>
</head>
<body>
<div>
<p class="userid">The ID is </p>
<p class="username">The content is </p>
</div>
</body>
</html>
注意到,上面的代码是客户端消费服务端产生的JSON格式的消息。
那么服务端怎么获取客户端JS产生的JSON数据呢?
服务端接受JSON
实际上想让服务端接受JSON数据非常简单,只要在刚刚的控制器中加入一个
端点:
@RestController
public class JSONTransController {
Logger logger=LoggerFactory.getLogger(JSONTransController.class);
@GetMapping("/clientConsuming")
public User getUser(){
User user=new User();
user.setUserid(1);
user.setName("oneslide");
return user;
}
@PostMapping("/serverConsuming")
public String sendUser(@RequestBody User user){
//@RequestBody从请求体中获取数据,并将其打印到控制台
logger.info(user.toString());
return "success";
}
}
这里有个简单的测试工具Postman:
fire and send,控制台输出:
当然实际上更常用的是通过JS来获取表单数据发送JSON格式消息到服务器端,上述已经验证服务器端能够成功消费JSON消息!所以写一段JS代码mock一个User:
$(document).ready(function () {
$.ajax({
type:"POST",
url:"http://localhost:8080/serverConsuming",
data:'{"userid":1,"name":"oneslide"}',
dataType:'json',
contentType:'application/json'
});
});
写一个页面,让它一加载就执行JS代码(没有任何特别):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ServerConsuming</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/JSONmock.js"></script>
</head>
<body>
nothing to show
</body>
</html>
查看浏览器发现请求成功发送:
查看日志发现和Postman测试结果相同:
此时项目结构: