如何使用 AJAX 从 restcontroller 打印数据?
How to print data from restcontroller using AJAX?
这是我的 index.html
:
<script src="/teachers.js"></script>
<table id="table-content" border='1'>
<tr>
<th>Teacher ID</th>
<th>Teacher Name</th>
<th>Teacher Position</th>
</tr>
</table>
teachers.js
:
var service = 'http://localhost:8081/api/v1';
$(document).ready(function(){
jQuery.support.cors = true;
$.ajax(
{
type: "GET",
url: service + '/teacher/',
// data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function (data) {
var trHTML = '';
$.each(data, function (i, item) {
trHTML += '<tr><td>' + data.Teacher[i].Name + '</td><td>' + data.Teacher[i].Position + '</td></tr>';
});
$('#table-content').append(trHTML);
},
和TeacherController
:
@RestController
@RequestMapping("/api/v1")
public class TeacherController {
private static final String TEACHER_MODEL = "teacher";
@Autowired
TeacherService teacherService;
@GetMapping("/teacher")
public List<Teacher> fetchAllTeacher() {
return teacherService.getAll();
}
当我得到 index.html
时,我只有空 table 并且在页面上只能查看 table 列的名称,没有数据..
我做错了什么,也许你可以用另一种方法来解决我的问题?
在此先感谢您的帮助!!!
现在我的浏览器出现了一个问题:
错误:
浏览器中的最后一个错误 window :
Invalid character found in the request target [/api/v1/teacher/?47;?{}
&_=1610297706796.] The valid characters are defined in RFC 7230 and RFC
3986</p><p><b>Description</b>
The server cannot or will not process the request due to something that is perceived to be a client error ( e.g., malformed request syntax, invalid request message framing, or deceptive request routing).
感谢@andrewjames 我解决了这个问题。
我编辑了我的 teachers.js
- trHTML
行,现在可以使用了:
var service = 'http://localhost:8081/';
$(document).ready(function(){
jQuery.support.cors = true;
$.ajax(
{
type: "GET",
url: service + 'teachers/',
// data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function (data) {
var trHTML = '';
$.each(data, function (i, teacher) {
trHTML += '<tr><td>' + teacher.teacherId + '</td><td>' + teacher.teacherName + '</td><td>' + teacher.position + '</td></tr>';
});
$('#table-content').append(trHTML);
},
error: function (msg) {
alert(msg.responseText);
}
});
})
这是我的 index.html
:
<script src="/teachers.js"></script>
<table id="table-content" border='1'>
<tr>
<th>Teacher ID</th>
<th>Teacher Name</th>
<th>Teacher Position</th>
</tr>
</table>
teachers.js
:
var service = 'http://localhost:8081/api/v1';
$(document).ready(function(){
jQuery.support.cors = true;
$.ajax(
{
type: "GET",
url: service + '/teacher/',
// data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function (data) {
var trHTML = '';
$.each(data, function (i, item) {
trHTML += '<tr><td>' + data.Teacher[i].Name + '</td><td>' + data.Teacher[i].Position + '</td></tr>';
});
$('#table-content').append(trHTML);
},
和TeacherController
:
@RestController
@RequestMapping("/api/v1")
public class TeacherController {
private static final String TEACHER_MODEL = "teacher";
@Autowired
TeacherService teacherService;
@GetMapping("/teacher")
public List<Teacher> fetchAllTeacher() {
return teacherService.getAll();
}
当我得到 index.html
时,我只有空 table 并且在页面上只能查看 table 列的名称,没有数据..
我做错了什么,也许你可以用另一种方法来解决我的问题?
在此先感谢您的帮助!!!
现在我的浏览器出现了一个问题:
错误:
浏览器中的最后一个错误 window :
Invalid character found in the request target [/api/v1/teacher/?47;?{}
&_=1610297706796.] The valid characters are defined in RFC 7230 and RFC
3986</p><p><b>Description</b>
The server cannot or will not process the request due to something that is perceived to be a client error ( e.g., malformed request syntax, invalid request message framing, or deceptive request routing).
感谢@andrewjames 我解决了这个问题。
我编辑了我的 teachers.js
- trHTML
行,现在可以使用了:
var service = 'http://localhost:8081/';
$(document).ready(function(){
jQuery.support.cors = true;
$.ajax(
{
type: "GET",
url: service + 'teachers/',
// data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function (data) {
var trHTML = '';
$.each(data, function (i, teacher) {
trHTML += '<tr><td>' + teacher.teacherId + '</td><td>' + teacher.teacherName + '</td><td>' + teacher.position + '</td></tr>';
});
$('#table-content').append(trHTML);
},
error: function (msg) {
alert(msg.responseText);
}
});
})