使用 Ajax 列出数据（仅显示最后的数据）[已解决]

Question

我正在使用 ASP.NET Core 开发一个项目。我想使用 Ajax 从数据库中提取数据而不发布页面。但只有一个和最后保存的数据出现。我可以在控制台看到其他数据。

你能帮我吗？ 谢谢，

<tr>
    <td class="border-bottom-0">
        <p id="getTaskTitle" class="fw-semibold mb-1l"></p>
    </td>
</tr>

$("#btnGetTask").click(function () {
            $.ajax({
                contentType: "application/json",
                dataType: "json",
                type: "GET",
                url: "/TaskList/ListTask/",
                success: function (func) {
                    let getList = jQuery.parseJSON(func);
                    let _getTaskTitle = document.getElementById("getTaskTitle")
                    $.each(getList, (i, value) => {
                        _getTaskTitle.innerText = `${value.TaskTitle}`
                        console.log(value.TaskTitle);
                    });

                }
            });
        });

它不会返回任何错误。

Answer 1

您的循环将内部文本的值替换为最近的值，所以为什么它只显示最后一个值。

不要在每个循环中添加

innerText

，而是创建字符串并追加一次。

示例：

var htm = "";
let _getTaskTitle = $("#getTaskTitle");
$.each(getList, (i, value) => {
  htm += `${value.TaskTitle}`
  //console.log(value.TaskTitle);
});
_getTaskTitle.text(htm); //or _getTaskTitle.html(htm)

更新：基于ajax响应之间的断线注释。

// Your data from ajax request. It's only sample data for example.
var getList = [{
    TaskTitle: "red",
    value: "#f00"
  },
  {
    TaskTitle: "green",
    value: "#0f0"
  },
  {
    TaskTitle: "blue",
    value: "#00f"
  }
];
var htm = "";
let _getTaskTitle = $("#getTaskTitle");
var dt = [];
$.each(getList, (i, value) => {
  dt.push(`${value.TaskTitle}`);
});
htm = dt.join("<br>");
_getTaskTitle.html(htm); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="getTaskTitle"></div>

注意：不要错过 jQuery 和 JavaScript 的匹配。