使用 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)

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