.Net MVC框架使用ajax做局部刷新

很基礎的內容加深一下自己的記憶力，下面就介紹一下，大神勿噴！：

下面是前臺的樣式：

<style>
 .menu-panel  dt a {
    background-color: #f0edec;
    color: #383737;
    display: block;
    font-family: bastardussansregular;
    font-size: 1pc;
    padding: 10px 0 10px 15px;
    text-decoration: none
}
 .menu-panel  dd a {
    background-repeat: no-repeat;
    background-color: #f6f6f6;
    color: #777;
    display: block;
    font-family:Arial;
    font-size: 14px;
    padding: 10px 0 10px 15px;
    text-decoration: none;
    margin-top: 2px
}
    .menu-panel dd a span {
        margin-right: 15px;
    }
    .menu-panel dd a:hover {
    background-color:orangered;
    color:white;
    }
</style>
<div class="container">
    <div class="col-sm-3">
        <dl class="menu-panel">
            <dt><a class="text-center" href="#">家電會場</a></dt>
            <dd><a href="#">平板電視<span class="glyphicon glyphicon-chevron-right pull-right"></span></a></dd>
            <dd><a href="#">冰洗會場<span class="glyphicon glyphicon-chevron-right pull-right"></span></a></dd>
            <dd><a href="#">廚房用品<span class="glyphicon glyphicon-chevron-right pull-right"></span></a></dd>
            <dd><a href="#">平板電視<span class="glyphicon glyphicon-chevron-right pull-right"></span></a></dd>
            <dd><a href="#">冰洗會場<span class="glyphicon glyphicon-chevron-right pull-right"></span></a></dd>
            <dd><a href="#">廚房用品<span class="glyphicon glyphicon-chevron-right pull-right"></span></a></dd>
        </dl>
    </div>
    <div class="col-sm-9">
       <div class="allMes">

       </div>
    </div>
</div>
<script>
    $(".menu-panel dd a").click(function () {
        $.ajax({
            type: "post",//選擇提交的方式
            url: "@Url.Content("~/Home/test")",//提交的方式
            async：true,//默認爲異步
            data: {
                tittle: $(this).parent().index()//提交的數據
            },
            success: function (data) {
                $(".allMes").html(data);//成功的時候返回的Html頁面
            },
            //beforeSend: function (data)
            //{
            //    $(".allMes").html("<img class='ladingimg img-responsive' src='http://115.159.74.194:8787/images/lading.gif' />");
            //},這段如果數據加載較久的時候可以加，就是在數據加載時候出現的過場動畫
            error: function (data)
            {
                alert("數據丟失錯誤！");
            }
            });
    });
</script>

主要的js代碼：

     $.ajax({
            type: "post",//選擇提交的方式
            url: "@Url.Content("~/Home/test")",//提交的方式
            async：true,//默認爲異步
            data: {
                tittle: $(this).parent().index()//提交的數據
            },
            success: function (data) {
                $(".allMes").html(data);//成功的時候返回的Html頁面
            },
            //beforeSend: function (data)
            //{
            //    $(".allMes").html("<img class='ladingimg img-responsive' src='http://115.159.74.194:8787/images/lading.gif' />");
            //},這段如果數據加載較久的時候可以加，就是在數據加載時候出現的過場動畫
            error: function (data)
            {
                alert("數據丟失錯誤！");
            }
            });
    });

控制器中的內容：

   [HttpPost]
        public ActionResult test(string tittle)
        {
            switch (tittle)
            {
                case "1":
                    return PartialView("first");//返回的是分佈視圖，不經過view_start.cshtml
                case "2":
                    return PartialView("serond");
                case "3":
                    return PartialView("third");
                default:
                    return PartialView("third");
            }


        }

大概就這樣，一個很基礎的ajax異步刷新的方式！