如何使用 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 [&#47;api&#47;v1&#47;teacher&#47;?47;?{}
&amp;_=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);
        }
    });
})