如何将来自 ajax 调用的数据附加到 ul 中的 div答案

【问题标题】：How to append data from ajax call to a div inside ul如何将来自 ajax 调用的数据附加到 ul 中的 div
【发布时间】：2020-12-21 12:30:13
【问题描述】：

我正在尝试将 ajax 中的数据检索到同一页面中的 div，我未能从 ajax 获取数据，它可能是我想要在其中获取数据的 div，但它是 li 的孩子li 是 ul 的孩子，那我该如何解决呢？

这里是 HTML 代码

<li>
    <ul class="notificationsbtn nav navbar-nav navbar-right">
        <li id="notificationsli">
            <a id="test" name="@currentUser.Id" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
                <small><i class="glyphicon glyphicon-bell"></i></small>
                @*@if (@Model.Where(n => n.IsRead == false).Any())*@
                @*{*@<span class="noty-manager-bubble" style="margin-left:0px; top: 10px; opacity: 1;">@*@Model.Where(n => n.IsRead == false).Count()*@10</span>@*}*@
            </a>
            <div id="notification-container" class="dropdown-menu" role="menu" aria-labelledby="drop3">
                <section class="panel">
                    <header class="panel-heading">
                        <strong>The Notification</strong>
                    </header>
                    <div id="notification-list">
                        @*@await Component.InvokeAsync("Notification")*@
                        <div style="float:left;margin-top:20px" class="loader"></div>
                    </div>
                    <footer class="panel-footer">
                        <a href="#" class="pull-right"><i class="fa fa-cog"></i></a>
                        <a asp-action="Index" asp-controller="Notifications" asp-route-id="@currentUser.Id" class="text-success h5" data-toggle="class:show animated fadeInRight"><span style="margin-left:0px; top: 5px; opacity: 1;" class="glyphicon glyphicon-bell"></span> all notifications</a>
                    </footer>
                </section>

            </div>
        </li>
    </ul>
</li>

和 jquery(ajax) 代码：

<script>
    $(document).ready(function () {
        $('#test').click(function () {
        {
            alert("ssss");
            //$("#notification-list").empty();
            var _url = '@Url.Action("GetMyViewCompNotification", "Home")';
            $(".loader").fadeIn();
            $.ajax({
                type: "GET",
                url: _url,
                data: { uid: $(this).prop("name") },
                success: function (result) {
                    $("#notification-list").html(result);
                    alert("success")
                },
                error: function (xhr, status, err) {
                    alert(err.toString(), 'Error - LoadListItemsHelper');
                },
                complete: function (result, jqXHR, status) {
                    $(".loader").fadeOut();
                }
            });
        }
    });
});
</script>

控制器中的动作代码：

 public  IActionResult GetMyViewCompNotification(string uid)
    {
        return ViewComponent("Notification", new { id = uid });//it will call Follower.cs InvokeAsync, and pass id to it.
    }

【问题讨论】：

你能发送 mvc 动作代码在动作返回 HTML 吗？或json
public IActionResult GetMyViewCompNotification(string uid) { return ViewComponent("Notification", new { id = uid });//它会调用 Follower.cs InvokeAsync，并将 id 传递给它。 }
它返回视图组件
所以你在这里返回视图并在notification-list 中分配它是正确的吗？
把这个$("#notification-list").html(result);改成$("#notification-list").append(result);

标签： javascript jquery ajax asp.net-core asp.net-ajax

【解决方案1】：

我遇到了问题，由于 id ("notification-list") 的原因，ajax 函数没有将数据附加到指定的 div，当我将 id 更改为 ("testn") 时，我得到了数据

 <script>
            $(document).ready(function () {
                $('#test').click(function () {
                {
                    //$("#notification-list").empty();
                    var _url = '@Url.Action("GetMyViewCompNotification", "Home")';
                    $(".loader").fadeIn();
                    $.ajax({
                        type: "GET",
                        url: _url,
                        data: { uid: $(this).prop("name") },
                        success: function (result) {
                            $(".testn").html(result);
                        },
                        error: function (xhr, status, err) {
                            alert(err.toString(), 'Error - LoadListItemsHelper');
                        },
                        complete: function (result, jqXHR, status) {
                            $(".loader").fadeOut();
                        }
                    });
                }
            });
        });
        </script>

【讨论】：