Javascript Spring WebFlux-使用REST on视图填充新实体的Id
我的问题与这个问题有些关联（但我使用的是WebFlux）- 我的实体：Javascript Spring WebFlux-使用REST on视图填充新实体的Id,javascript,spring-webflux,Javascript,Spring Webflux,我的问题与这个问题有些关联（但我使用的是WebFlux）- 我的实体： @Table public class Todo { @Id private Long id; private String text; private boolean completed; ...Getters Setters... } 我的存储库（被动）： 到存储库的公共接口扩展了reactivecrudeposi
@Table
public class Todo {
@Id
private Long id;
private String text;
private boolean completed;
...Getters Setters...
}
到存储库的公共接口扩展了reactivecrudepository{
通量findAll（）；
Flux findByText（字符串文本）；
}
@RestController
@RequestMapping("/api")
class TodoController {
private TodoRepository repository;
......
@PostMapping("/todo")
Mono<Todo> addTodo(@RequestBody Todo todo) {
logger.info("Creating New Todo...");
return repository.save(todo).log();
//return repository.save(todo);
}
}
@RestController
@请求映射（“/api”）
类TodoController{
私有存储库；
......
@后映射（“/todo”）
Mono addTodo（@RequestBody-Todo-Todo）{
logger.info（“创建新Todo…”）；
返回repository.save（todo.log（）；
//返回repository.save（todo）；
}
}
function insertNewRecord(formData) {
fetch('/api/todo', {
method: 'POST',
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json'
},
body: JSON.stringify({ id: formData.todoid, text: formData.todotext, completed: formData.todocompleted })
}).then((response) => {
if (response.status >= 400 && response.status < 600) {
throw new Error("Bad response from server");
}
if (response.status === 200) {
alert('Entry Successful.. ! \nTable will be reloaded now.!');
//reloadRecords();
var table = document.getElementById("dataTable").getElementsByTagName('tbody')[0];
var newRow = table.insertRow(table.length);
// WHAT SHOULD I DO IN PLACE OF BELOW TWO LINES TO GET ID OF NEW ENTITY?
cell1 = newRow.insertCell(0);
cell1.innerHTML = formData.todoid;
cell2 = newRow.insertCell(1);
cell2.innerHTML = formData.todotext;
cell3 = newRow.insertCell(2);
cell3.innerHTML = formData.todocompleted;
cell4 = newRow.insertCell(3);
cell4.innerHTML = `<a class="btn btn-sm btn-warning mr-3" onClick="onEdit(this)">Edit</a>
<a class="btn btn-sm btn-danger" onClick="onDelete(this)">X</a>`;
}
// alert(response.status);
})
.catch((error) => {
// Your error is here!
alert(error)
});
}
函数insertNewRecord（formData）{
获取（'/api/todo'{
方法：“POST”，
标题：{
“Accept'：“application/json，text/plain，*/*”，
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（{id:formData.todoid，text:formData.todotext，completed:formData.todocompleted}）
})。然后（（响应）=>{
如果（response.status>=400&&response.status<600）{
抛出新错误（“来自服务器的错误响应”）；
}
如果（response.status==200）{
警报（'输入成功..！\n现在将重新加载表格。！'）；
//重新加载记录（）；
var table=document.getElementById（“数据表”）.getElementsByTagName（“tbody”）[0]；
var newRow=table.insertRow（table.length）；
//我应该做什么来代替下面两行来获取新实体的ID？
cell1=newRow.insertCell（0）；
cell1.innerHTML=formData.todoid；
cell2=newRow.insertCell（1）；
cell2.innerHTML=formData.todotext；
cell3=newRow.insertCell（2）；
cell3.innerHTML=formData.todocompleted；
cell4=newRow.insertCell（3）；
cell4.innerHTML=`，第20-56行），新条目成功保存在后端。在此之前，这里没有任何问题
My表单和表格在Thymeleaf模板上：
<form onsubmit="event.preventDefault();onFormSubmit();"
autocomplete="off">
<div class="row mb-2">
<div class="col-md-2 text-right font-weight-bold">
<label for="todoid" class="form-label">Id</label>
</div>
<div class="col-md-2">
<div class="input-group">
<input type="text" class="form-control form-control-sm"
name="todoid" id="todoid" readonly>
</div>
</div>
</div>
<div class="row mb-2">
<div class="col-md-2 text-right font-weight-bold">
<label for="todotext" class="form-label">Description</label>
</div>
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control form-control-sm"
name="todotext" id="todotext">
</div>
</div>
</div>
<div class="row mb-2">
<div class="col-md-2 text-right font-weight-bold">
<label for="todocompleted" class="form-label">Completed?</label>
</div>
<div class="col-md-2">
<div class="input-group">
<select class="form-select form-control-sm" name="todocompleted"
id="todocompleted">
<option value="true">True</option>
<option selected value="false">False</option>
</select>
</div>
</div>
</div>
<div class="row mt-3 mb-3">
<div class="col-md-2 font-weight-bold"></div>
<div class="col-md-9">
<input type="submit" value="Submit"
class="btn btn-sm btn-primary btn-block">
</div>
</div>
</form>
<div class="row mt-3 mb-3">
<div class="col-md-2 font-weight-bold"></div>
<div class="col-md-9">
<table class="table table-sm table-striped" id="dataTable">
<thead>
<tr>
<th>Id</th>
<th>Description</th>
<th>Completed?</th>
<th>Action</th>
</tr>
</thead>
<tbody id="appDataTable2"></tbody>
</table>
</div>
</div>
身份证件
描述
完整的？
符合事实的
错误的
身份证件
描述
完整的？
行动
现在，填充html表时没有新实体/条目的Id，如下所示：
但这正是我所期望的。也就是说，使用相同的请求填充新生成的id。也就是说，在不重新加载整个列表/表格或刷新页面的情况下：
我在这里迷路了。任何相关示例的链接或线索都将不胜感激。您的问题非常简单，您正在使用对象formData
填充您的表，该表是以html表单输入的数据
您必须使用从后端返回的数据
fetch('https://foobar.com', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(someData),
})
.then(response => response.json()) // extract json from response
.then(data => {
...
cell1.innerHTML = data.id; // use the returned data
...
})
因此，这一行不起作用，cell1.innerHTML=formData.todoid；
，id字段中没有值，因为该数据是由后端设置的
fetch('https://foobar.com', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(someData),
})
.then(response => response.json()) // extract json from response
.then(data => {
...
cell1.innerHTML = data.id; // use the returned data
...
})
这就是我们需要查看整个代码库的原因。因为这部分代码从一开始就没有被您发布过。这是不可能回答的，因为我们不知道您的任何代码。您没有发布任何关于您的实体的外观、html表的代码、调试日志、从数据库中获取的内容，w您正在返回客户端。所有请求的所有日志？不要链接到您的代码，在您的问题中包括相关的代码部分，最好有足够的代码，以便我们可以重现问题。由于缺少调试详细信息，投票关闭。您能具体说明您需要什么吗？我可以提供。或者此问题将被关闭nOO？阅读自己的问题，你是否认为你已经留下了足够的信息让任何人在他们自己的想法中重现问题？你提供的代码片段是ARNT甚至Runnable。好的。将用实体、JS和HTML一起更新问题。谢谢托马斯。更新了托马斯所要求的所有信息。谢谢你的指针。@Thomas.Man！！.是的，就像你说的那样简单。它与cell1.innerHTML=data.id；
一起工作，因为我的实体中有id，因此得到了响应。非常感谢你的帮助。