jquery ajax 通过json取值并且进行联动

前台页面：

JS 部分：（这里的js如果单独写为一个js文件，貌似联动不起作用，所以建议大家还是放在页面里面（html、aspx））

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function () {

$.ajax({

type: "POST",

url: "IndexHandler.ashx",

//我们用text格式接收

//dataType: "text",

//json格式接收数据

dataType: "json",

data: "meth=load&pid=0",

success: function (msg) {

//实例2个字符串变量来拼接下拉列表

var vocaspec = "<select id=\"seVocaspec\" name=\"vocaspec\"><option value=\"-1\">--请选择--</option>";

//使用jquery解析json中的数据

$.each(msg.voce, function (n, value) {

vocaspec += ("<option value=\"" + value.code + "\">" + value.name);

vocaspec += ("</option>");

});

vocaspec += ("</select>");

$("#vocaspec").html(vocaspec);

}

});

$("#seVocaspec").change(function () {

if ($(this).val() == "-1") { $("#industr").remove(); return; }

else {

$.ajax({

type: "POST",

url: "IndexHandler.ashx",

//我们用text格式接收

//dataType: "text",

//json格式接收数据

dataType: "json",

data: "meth=load&pid=" + $(this).val(),

success: function (msg) {

//实例2个字符串变量来拼接下拉列表

var industr = "<select name=\"industr\" id=\"industr\"><option value=\"-1\">--请选择--</option>";

//使用jquery解析json中的数据

$.each(msg.voce, function (n, value) {

industr += ("<option value=\"" + value.code + "\">" + value.name);

industr += ("</option>");

});

industr += ("</select>");

$("#industr").html(industr);

}

});

}

});

});

</script>

html部分：

企业性质<div id="vocaspec">

</div>

行业类型<div id="industr">

</div>

IndexHandler.ashx部分：（我这里只是一个简单的数据绑定取值，当然也可以从数据库取得数据，具体取数据查看项目实际情况）

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "application/json";

//接收提交过来的meth参数

string meth = context.Request.Params["meth"].ToString();

string pid = context.Request.Params["pid"].ToString();

//根据参数调用不同的方法

switch (meth)

{

case "load":

loadjson(context, pid);

break;

}

}

private void loadjson(HttpContext context, string pid)

{

//实例BLL

List<Area> areaList = new List<Area>();

if (pid == "0")

{

areaList.Add(new Area

{

AreaID = "01",

AreaName = "罗湖区",

PID = "0"

});

areaList.Add(new Area

{

AreaID = "02",

AreaName = "福田区",

PID = "0"

});

}

if (pid == "01")

{

areaList.Add(new Area

{

AreaID = "0101",

AreaName = "莲塘",

PID = "01"

});

areaList.Add(new Area

{

AreaID = "0102",

AreaName = "黄贝岭",

PID = "01"

});

}

if (pid == "02")

{

areaList.Add(new Area

{

AreaID = "0201",

AreaName = "八卦岭",

PID = "02"

});

areaList.Add(new Area

{

AreaID = "0202",

AreaName = "华强",

PID = "02"

});

}

//实例一个StringBuilder 用来拼接一个json数据

StringBuilder sbvoca = new StringBuilder();

if (areaList != null && areaList.Count > 0)

{

sbvoca.Append("{\"voce\":[");

int i = 1;

int count = areaList.Count;

foreach (Area dr in areaList)

{

if (i == count)

{

sbvoca.Append("{\"code\":\"" + dr.AreaID + "\",\"name\":\"" + dr.AreaName + "\"}");

}

else

{

sbvoca.Append("{\"code\":\"" + dr.AreaID + "\",\"name\":\"" + dr.AreaName + "\"},");

}

i++;

}

sbvoca.Append("]");

}

sbvoca.Append("}");

context.Response.Write(sbvoca.ToString());

context.Response.End();

}

public class Area

{

public string AreaID { get; set; }

public string AreaName { get; set; }

public string PID { get; set; }

}