Question

jquery+ajax实现前台后台数据交互

关于商品一级二级分类的，页面左侧有商品一级分类，当我鼠标移入某个一级分类时就能显示数据库里该一级分类里的二级分类，请大神给个详细点源代码参考，采纳后追加悬赏

Answer 1

页面代码
<div id="UserSearch">
<select id="AreaType" name="AreaType">
</select>
<select id="AreaLevel1" name="AreaLevel1">
</select>
<select id="AreaLevel2" name="AreaLevel2">
</select>
<select id="AreaLevel3" name="AreaLevel3">
</select>
<span>门牌号：</span>
<input id="HouseNumber" name="HouseNumber" style="width: 60px" type="text" />
<span>客户名称：</span>
<input id="UserName" name="UserName" style="width: 60px" type="text" />
<input type="submit" value="搜索" />
</div>
JS代码

<script type="text/javascript">

$(document).ready(function () {
GetAreaType();
$("#AreaType").change(function () { GetAreaLevel1(); });
$("#AreaLevel1").change(function () { GetAreaLevel2(); });
$("#AreaLevel2").change(function () { GetAreaLevel3(); });
});
function GetAreaType() {
var url = "/Charge/GetAreaType/"; //规则是 控制器/方法/参数
$.getJSON(
url,
function (data) {
$("#AreaType").html('');
$.each(data, function (i, item) {
$("#AreaType").append($("<option></option>").val(item.Value).html(item.Text));
});
GetAreaLevel1();
});
}

function GetAreaLevel1() {
var url = "/Charge/GetAreaLevel1/" + $("#AreaType").val(); //规则是 控制器/方法/参数
$.getJSON(
url,
function (data) {
$("#AreaLevel1").html('');
$.each(data, function (i, item) {
$("#AreaLevel1").append($("<option></option>").val(item.Value).html(item.Text));
});
GetAreaLevel2();
});
}

function GetAreaLevel2() {
var url = "/Charge/GetAreaLevel2/" + $("#AreaLevel1").val(); //规则是 控制器/方法/参数
$.getJSON(
url,
function (data) {
$("#AreaLevel2").html('');
$.each(data, function (i, item) {
$("#AreaLevel2").append($("<option></option>").val(item.Value).html(item.Text));
});
GetAreaLevel3();
});
}

function GetAreaLevel3() {
var url = "/Charge/GetAreaLevel3/" + $("#AreaLevel2").val(); //规则是 控制器/方法/参数
$.getJSON(
url,
function (data) {
$("#AreaLevel3").html('');
$.each(data, function (i, item) {
$("#AreaLevel3").append($("<option></option>").val(item.Value).html(item.Text));
});
});
}

</script>
后台代码：
public ActionResult GetAreaType()
{
IEnumerable<SelectListItem> list = new List<SelectListItem>();
list = context.供热区类型
.OrderBy(a => a.类型ID)
.Select(a => new System.Web.Mvc.SelectListItem
{
Text = a.类型名称.Trim(),
Value = a.类型ID.Trim()
});
if (Request.IsAjaxRequest())
{
return Json(list, JsonRequestBehavior.AllowGet);
}
else
{
return Json("");
}
}

public ActionResult GetAreaLevel1(string id)
{
IEnumerable<SelectListItem> list = new List<SelectListItem>();
list = context.供热区.Where(a => a.地址ID.Substring(0, 1) == id.Trim() && a.级数 == 1)
.OrderBy(a => a.地址ID)
.Select(a => new System.Web.Mvc.SelectListItem
{
Text = a.地址名称.Trim(),
Value = a.地址ID.Trim()
});
if (Request.IsAjaxRequest())
{
return Json(list, JsonRequestBehavior.AllowGet);
}
else
{
return Json("");
}
}

public ActionResult GetAreaLevel2(string id)
{
IEnumerable<SelectListItem> list = new List<SelectListItem>();
list = context.供热区.Where(a => a.地址ID.Substring(0, 3) == id.Trim() && a.级数 == 2)
.OrderBy(a => a.地址ID)
.Select(a => new System.Web.Mvc.SelectListItem
{
Text = a.地址名称.Trim(),
Value = a.地址ID.Trim()
});
if (Request.IsAjaxRequest())
{
return Json(list, JsonRequestBehavior.AllowGet);
}
else
{
return Json("");
}
}

public ActionResult GetAreaLevel3(string id)
{
IEnumerable<SelectListItem> list = new List<SelectListItem>();
list = context.供热区.Where(a => a.地址ID.Substring(0, 6) == id.Trim() && a.级数 == 3)
.OrderBy(a => a.地址ID)
.Select(a => new System.Web.Mvc.SelectListItem
{
Text = a.地址名称.Trim(),
Value = a.地址ID.Trim()
});
if (Request.IsAjaxRequest())
{
return Json(list, JsonRequestBehavior.AllowGet);
}
else
{
return Json("");
}
}
类似这样的三级联动下拉框的方法就能解决你的问题。