使用AJAX和JQuery以设定的间隔自动刷新页面

时间:2015-12-02 23:05:08

标签: javascript jquery ajax asp.net-mvc-4 asp.net-mvc-5

我试图以5秒的间隔刷新页面,这应该用来自SQL Server的最新数据更新视图。以下是代码。

@model Test.Data.Domain.ManufacturingCdMachine
@{
    ViewBag.Title = "Rimage Details";
    ViewBag.JobId = Model.CurrentManufacturingJobId;
}
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top" id="navbar">
        <div class="container">
            <div class="navbar-header">
            </div>
        </div>
    </div>
    <div id="CdMachineDetails">
        @if (@Model.CurrentManufacturingJobId != null)
        {
            <div>
                @{Html.RenderPartial("_CdMachineJob");}
            </div>
        }
        else
        {
            <div>
                @{Html.RenderPartial("_MachineInIdle");}
            </div>
        }
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")

</body>
</html>
<script type="text/javascript"
        src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
    $(document).ready(
            function() {
                setInterval(function() {
                    var randomnumber = Math.floor(Math.random() * 100);
                    $.ajax({
                        type: "GET",
                        url: "/Mobile/CdMachine/Details/" + @Model.ManufacturingCdMachineId,
                        data: {

                        },
                        success: function (result) {
                            //Sets your content into your div
                            $('#CdMachineDetails').html(result);
                        }
                    });

                }, 5000);
            });
</script>

我的网页网址为http://localhost:28886/Mobile/CdMachine/Details/1

然而,页面似乎并不令人耳目一新。我做错了什么?

-Alan -

1 个答案:

答案 0 :(得分:-1)

  1. 您的JS中存在语法错误。我认为你在JS代码的末尾缺少括号。
  2. Ajax不刷新页面 - 您只需获取当然可以放在DOM上的内容,或者可以根据需要对其进行操作。
  3. 指向本地主机服务器的URL当然不起作用 - 必须公开。