大海话语 2021-10-26 11:28 采纳率: 87.6%
浏览 115
已结题

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

  • 写回答

5条回答 默认 最新

  • 一把编程的菜刀 2021-10-26 11:53
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题?

问题事件

  • 系统已结题 11月3日
  • 已采纳回答 10月26日
  • 创建了问题 10月26日

悬赏问题

  • ¥15 metadata提取的PDF元数据,如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误,如何解决?
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本,但是每一行里面数据之间空格数量不同
  • ¥50 如何openEuler 22.03上安装配置drbd
  • ¥20 ING91680C BLE5.3 芯片怎么实现串口收发数据
  • ¥15 无线连接树莓派,无法执行update,如何解决?(相关搜索:软件下载)
  • ¥15 Windows11, backspace, enter, space键失灵