如何将 ajax 调用中的数据附加到 ul 中的 div

Question

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

这里是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.
    }

Answer 1

我遇到了问题，当我将 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>

如何将 ajax 调用中的数据附加到 ul 中的 div

How to append data from ajax call to a div inside ul

javascript

ajax

jquery

asp.net-ajax

asp.net-core