|
|
|
步骤 2 : 模仿和排错 步骤 3 : 本知识点效果 步骤 4 : 基于前面的知识点 步骤 5 : Category 步骤 6 : CategoryController 步骤 7 : submit.html 步骤 8 : getOne.html 步骤 9 : getMany.html
老规矩，先下载右上角的可运行项目，配置运行起来，确认可用之后，再学习做了哪些步骤以达到这样的效果。
注： 启动方式是Springboot特有的，直接运行类：com.how2java.springboot.Application 的主方法。
在确保可运行项目能够正确无误地运行之后，再严格照着教程的步骤，对代码模仿一遍。
模仿过程难免代码有出入，导致无法得到期望的运行结果，此时此刻通过比较正确答案 ( 可运行项目 ) 和自己的代码，来定位问题所在。 采用这种方式，学习有效果，排错有效率，可以较为明显地提升学习速度，跨过学习路上的各个槛。 推荐使用diffmerge软件，进行文件夹比较。把你自己做的项目文件夹，和我的可运行项目文件夹进行比较。 这个软件很牛逼的，可以知道文件夹里哪两个文件不对，并且很明显地标记出来 这里提供了绿色安装和使用教程：diffmerge 下载和使用教程
本知识点效果有三个，分别是以json方式：提交，获取单个和获取多个
提交 http://localhost:8080/submit.html 获取单个 http://localhost:8080/getOne.html 获取多个 http://localhost:8080/getMany.html
基于Restful 风格的springboot进行修改。 毕竟Restful 风格的springboot直接转换为json，很方便的啦
1. 增加个toString() 方便，便于显示
2. 增加个注解：@JsonIgnoreProperties({ "handler","hibernateLazyInitializer" }) ，否则会出错 package com.how2java.springboot.pojo;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
@Entity
@Table(name = "category_")
@JsonIgnoreProperties({ "handler","hibernateLazyInitializer" })
public class Category {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "id")
private int id;
@Column(name = "name")
private String name;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public String toString() {
return "Category [id=" + id + ", name=" + name + "]";
}
}
控制器里提供3个方法，分别用来处理json 提交，json获取单个对象，json获取多个对象
package com.how2java.springboot.web;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.how2java.springboot.dao.CategoryDAO;
import com.how2java.springboot.pojo.Category;
@RestController
public class CategoryController {
@Autowired CategoryDAO categoryDAO;
@GetMapping("/category")
public List<Category> listCategory(@RequestParam(value = "start", defaultValue = "0") int start,@RequestParam(value = "size", defaultValue = "5") int size) throws Exception {
start = start<0?0:start;
Sort sort = new Sort(Sort.Direction.DESC, "id");
Pageable pageable = new PageRequest(start, size, sort);
Page<Category> page =categoryDAO.findAll(pageable);
return page.getContent();
}
@GetMapping("/category/{id}")
public Category getCategory(@PathVariable("id") int id) throws Exception {
Category c= categoryDAO.getOne(id);
System.out.println(c);
return c;
}
@PutMapping("/category")
public void addCategory(@RequestBody Category category) throws Exception {
System.out.println("springboot接受到浏览器以JSON格式提交的数据："+category);
}
}
访问测试地址：
http://localhost:8080/submit.html 提交成功后，在springboot控制台查看使用json方式提交的数据 注： 不要在eclipse自带的浏览器里面点击，自带的浏览器有bug，有时候不能识别jquery, 会导致点击没有反应。 使用独立的浏览器，比如chrome,firefox点击测试 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用AJAX以JSON方式提交数据</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<form >
id：<input type="text" id="id" value="123" /><br/>
名称：<input type="text" id="name" value="category xxx"/><br/>
<input type="button" value="提交" id="sender">
</form>
<div id="messageDiv"></div>
<script>
$('#sender').click(function(){
var id=document.getElementById('id').value;
var name=document.getElementById('name').value;
var category={"name":name,"id":id};
var jsonData = JSON.stringify(category);
var page="category";
$.ajax({
type:"put",
url: page,
data:jsonData,
dataType:"json",
contentType : "application/json;charset=UTF-8",
success: function(result){
}
});
alert("提交成功，请在springboot控制台查看服务端接收到的数据");
});
</script>
</body>
</html>
访问测试地址：
http://localhost:8080/getOne.html 注意：要确保id=10的分类对象存在 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用AJAX以JSON方式获取数据</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<input type="button" value="通过AJAX获取一个Hero对象---" id="sender">
<div id="messageDiv"></div>
<script>
$('#sender').click(function(){
var url="category/10";
$.get(
url,
function(data) {
console.log(data);
var json=data;
var name =json.name;
var id = json.id;
$("#messageDiv").html("分类id："+ id + "<br>分类名称:" +name );
});
});
</script>
</body>
</body>
</html>
访问测试地址：
http://localhost:8080/getMany.html 点击按钮，获取多个json数据 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用AJAX以JSON方式获取数据</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<input type="button" value="通过AJAX获取多个分类对象" id="sender">
<div id="messageDiv"></div>
<script>
$('#sender').click(function(){
var url="category?start=0&size=100";
$.get(
url,
function(data) {
var categorys = data;
for(i in categorys){
var old = $("#messageDiv").html();
var category = categorys[i];
$("#messageDiv").html(old + "<br>"+category.id+" ----- "+category.name);
}
});
});
</script>
</body>
</body>
</html>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2022-06-01
回答上面的问题
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2022-06-01
为什么输入的id与实际写到数据库的id不一致
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-06-24
后端可以获取到对象，但无法返回给前端
2020-02-02
关于Restful 风格的springboot直接转换为json
2019-09-19
后端查询到的对象没有正常返回给前端
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 13 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
|||||||||||||||||
