Question

有人可以帮忙为什么下面的代码不起作用吗？问题是，当页面加载时，它会使用GetData（）函数显示所有结果，这很好。我添加了搜索输入并将其与jquery OnClick事件绑定，该事件首先使容器为空，并使用ajax结果更新相同的容器。 OnClick函数的确获取了JSON数据，但div #container尚未更新，并且保持空白。但是，如果按f5键（仅按F5键而不是Ctrl + F5或Hard Refresh键），它将显示更新的结果。这是代码：

<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Official Blog</title>
<style>
    h2 {
        padding: 10px;
    }
    .card {
        margin-bottom: 30px;
        height: 300px;
        overflow: hidden;
        padding: 10px;
    }
</style>
</head>
<body>
<h1>Official Blog</h1>
<div>
    <form>
        <input type="text" id="searchBox" />
        <button id="searchButton" type="button">Search</button>
    </form>
</div>
<div id="container" class="row"></div> 
<div id="result" class="row"></div> 
   <div id="progress" style="display:none">
        <h4>Loading...</h4>
    </div>

    @section Scripts
        {
        <script type="text/javascript">
            var pageSize = 5;
            var pageIndex = 0;
            var searchString = document.getElementById("searchBox").value;

            $(document).ready(function () {
                GetData();
                $(window).scroll(function () {
                    if ($(window).scrollTop() ===
                        $(document).height() - $(window).height()) {
                        alert("Your reached bottom");
                        GetData();
                    }
                });
                $("#searchButton").click(function (e) {
                    e.preventDefault();
                    searchString = document.getElementById("searchBox").value;
                    $("#container").empty();
                    GetData();
                });
            });

            function GetData() {
                searchString = document.getElementById("searchBox").value;
                $.ajax({
                    type: 'POST',
                    url: '/Blog/GetData',
                    data: { "pageindex": pageIndex, "pagesize": pageSize, "searchstring": searchString },
                    dataType: 'json',
                    cache: false,
                    success: function (data) {
                        if (data != null) {
                            for (var i = 0; i < data.length; i++) {
                                var date = new Date(data[i].datePosted).toString().substr(0, 15);
                                $("#container").append(
                                    "<div class=\"col-sm-6\">" +
                                    "<div class=\"card\">" +
                                    "<h2><a href=\"" +
                                    data[i].slug +
                                    "\">" +
                                    data[i].title +
                                    "</a></h2>" +
                                    "<p>" +
                                    date +
                                    "</p>" +
                                    "<p>" +
                                    (data[i].body).substr(0, 240).replace(/<\/?[^>]+>/gi, '') +
                                    "</p>" +
                                    "</div>" +
                                    "</div>");

                            }
                            pageIndex++;
                        }
                    },
                    beforeSend: function () {
                        $("#progress").show();
                    },
                    complete: function () {
                        $("#progress").hide();
                    },
                    error: function () {
                        alert("Error while retrieving data!");
                    }
                });
            }
        </script>
    }
</body>
</html>

Ajax调用不会更新MVC Core Razor页面中的div

0 个答案: