ASP.NET MVC如何在頁面加載完成后ajax異步刷新

背景：之前已寫過兩篇有關Ajax的隨筆，這一篇是單獨針對在頁面加載完成的Ajax操作。比如說打開學生列表頁面，先加載頁面，然后以Ajax的方式，從數據庫中檢索相應的學生信息，給瀏覽者更好的體驗。

簡單版本：document加載完成之后，調用ajax刷新當前頁面，修改pLoad的顯示文本。

前台代碼如下：

<body>
    <div>
        <p id="pLoad">Ajax之前的結果</p>
    </div>
</body>
</html>
<script>
    $(function () {
        $.ajax({
            type: "POST",
            url: "/PageLoad/Test?City=北京&Name=SharpL&Age=18",
            cache: false,
            data: null,
            success: function (result) {
                if (result) {
                    $("#pLoad").text("ajax之后的結果為 " + result.Message + "\n");
                }
            }
        })
    });
</script>

如代碼所示，在加載完成之后，ajax調用PageLoad控制器下的Test動作方法，后台代碼如下：

        public ActionResult Test()
        {
            var actionResult = default(JsonResult);
            var stu = new STU();
            this.UpdateModel(stu);
            var tmp = string.Format("{0}{1}歲，來自{2}", stu.Name, stu.Age, stu.City);
            actionResult = new JsonResult()
            {
                Data = new { Message = tmp }
            };
            Thread.Sleep(5000);
            return actionResult;
        }

根據前台傳遞過來的學生信息，返回一個字符串給ajax，注意Thread.Sleep(5000)，使當前的進程休息5秒，使ajax的效果更加明顯，效果圖如下：

剛剛加載完Document之后：

5秒鍾之后：

 

補充：以$.post()的方式發起Ajax請求，參考鏈接：AJAX請求 $.post方法的使用

等價的AJax代碼1：

        $.post("/TestAjax/Test", { City: '北京', Name: 'Sharp', Age: 23 }, function (result) {
            if (result) {
                $("#pDisplay").text("返回信息為 " + result.Message + "\n" + "隨機數為" + result.RandomNum);
            }
        });

等價的Ajax代碼2：

        $.post("/TestAjax/Test?City=北京&Name=SharpL&Age=45", "", function (result) {
            if (result) {
                $("#pDisplay").text("返回信息為 " + result.Message + "\n" + "隨機數為" + result.RandomNum);
            }
        });