大海话语 2021-10-26 11:28 采纳率: 87.9%
浏览 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 cplex运行后参数报错是为什么
  • ¥15 之前不小心删了pycharm的文件,后面重新安装之后软件打不开了
  • ¥15 vue3获取动态宽度,刷新后动态宽度值为0
  • ¥15 升腾威讯云桌面V2.0.0摄像头问题
  • ¥15 关于Python的会计设计
  • ¥15 聚类分析 设计k-均值算法分类器,对一组二维模式向量进行分类。
  • ¥15 stm32c8t6工程,使用hal库
  • ¥15 找能接spark如图片的,可议价
  • ¥15 关于#单片机#的问题,请各位专家解答!
  • ¥15 博通raid 的写入速度很高也很低