.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异步刷新的方式！