ajax 发送请求与接收请求，不在表格中显示

我现在 在学习html，在html中发送请求，但是，返回来的数据，不在表单中。我想是代码可能哪里出问题了。

img

前端代码是

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='土星音乐上传',active='home'">
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript"></script>

</head>
<body>
<form method="post" enctype="multipart/form-data" id="singleForm" style="text-align: center"
      action="http://localhost:8080/singleNameAccurately"><br><br>
    <input type="text" id="text001" name="singleName" placeholder="输入"/></td>
    <input type="submit" value="确定" id="ensureSingle" onclick="ensureAlert()">
</form>

<table id="tab">
    <tr>
        <th class="id">id</th>
        <th class="name">歌名</th>
        <th class="address">地址</th>
    </tr>

</table>

</body>

<script>
    window.onload(function requestData() {
        $.ajax({
            url: "http://localhost:8080/singleNameAccurately",
            type: "post",
            dataType: "json",
            success: function (data) {
                /*这个方法里是ajax发送请求成功之后执行的代码*/
                showData(data);//我们仅做数据展示
            },
            error: function (msg) {
                alert("ajax连接异常：" + msg);
            }
        });
    });

    //展示数据
    function showData(data) {
        var str = "";//定义用于拼接的字符串
        for (var i = 0; i < data.length; i++) {
            //拼接表格的行和列
            str = "<tr><td>" + data[i].name + "</td><td>" + data[i].password + "</td></tr>";
            //追加到table中
            $("#tab").append(str);
        }
    }

    //格式化数据并显示
    function show(result) {
        var cont = $(".main tbody");
        cont.html("");
        //清空
        for (var row of result) {
            var str = "<tr>" + "<td>" + row.id + "</td>" + "<td>" + row.name + "</td>" + "<td>" + row.address + "</td>" + "</tr>";
            cont.append(str);
        }
        //没有数据把空的内容显示出来
        if (result.length > 0) $(".empty").hide(); else $(".empty").show();
    }
</script>

<style>
    #ensureSingle {
        background-color: #ffa991;
        border-radius: 3px 3px;
    }
</style>
</html>

img

下面是后端代码

img

根据你上面的代码，我感觉是你调用错函数了吧，show(result)这个函数应该才是增加歌曲的吧
showData(data) 这个看上去是显示用户名和密码的

显示在HTML中，是需要自己操作的哈

你这里有个问题，第一，你上面的是三列，下面添加的只有两列，我给你代码改了一下，你拿去试试：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='土星音乐上传',active='home'">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    #ensureSingle {
        background-color: #ffa991;
        border-radius: 3px 3px;
    }
</style>
</head>
<body>
<form method="post" enctype="multipart/form-data" id="singleForm" style="text-align: center"
      action="http://localhost:8080/singleNameAccurately"><br><br>
    <input type="text" id="text001" name="singleName" placeholder="输入"/></td>
    <input type="submit" value="确定" id="ensureSingle" onclick="ensureAlert()">
</form>
<table id="tab">
    <tr>
        <th class="name">名称</th>
        <th class="address">密码</th>
    </tr>
</table>
</body>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    window.onload(function requestData() {
        $.ajax({
            url: "http://localhost:8080/singleNameAccurately",
            type: "post",
            dataType: "json",
            success: function (data) {
        var str = "";//定义用于拼接的字符串
        for (var i = 0; i < data.length; i++) {
            //拼接表格的行和列
            str = "<tr><td>" + data[i].name + "</td><td>" + data[i].password + "</td></tr>";
            //追加到table中
            $("#tab").append(str);
        }
            },
            error: function (msg) {
                alert("ajax连接异常：" + msg);
            }
        });
    });
   
</script>
</html>

emmm你拿到的数据有name和password字段么

后端代码有点问题

img