很基础的内容加深一下自己的记忆力,下面就介绍一下,大神勿喷!:
下面是前台的样式:
<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异步刷新的方式!