如何将数据从Ajax调用追加到ul内部的div

问题描述

我试图在同一页面中从ajax到div检索数据，但是我无法从ajax检索数据，可能是我想在其中获得数据的div，但这是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.
    }

解决方法

我遇到了问题，由于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>