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

发布网友 发布时间：2022-04-24 00:36

我来回答

共1个回答

热心网友 时间：2022-04-22 15:22

页面代码
<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("");
}
}
类似这样的*联动下拉框的方法就能解决你的问题。