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

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日

悬赏问题

  • ¥20 docker里部署springboot项目,访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏!微信开发者工具报错,求帮改
  • ¥20 wireshark抓不到vlan
  • ¥20 关于#stm32#的问题:需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法