JS实现Ajax,Josn数据的序列化和反序列化---例: 省市区联动(包含get,post)

服务器端相应JOSN数据   用到序列化和反序列化----命名空间using System.Web.Script.Serialization;

 public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//获取请求的参数
string id = context.Request["id"].ToString();
//通过参数查询父级id是参数的数据
DataClasses1DataContext db = new DataClasses1DataContext();
List<ChinaStates> list = db.ChinaStates.Where(p => p.ParentAreaCode == id).ToList();
//将查询到的数据序列化,,用到using System.Web.Script.Serialization;
JavaScriptSerializer jss = new JavaScriptSerializer();
//调用jss.Serialize(list)方法,,得到josn类型的字符串,使用时要反序列化,得到josn数组
string josnData = jss.Serialize(list);
context.Response.Clear();
context.Response.Write(josnData);
context.Response.End();
}

通过以上方法得到的JOSN数据----崩溃类型0.0

[{"AreaCode":"","AreaName":"河北","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"山西","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"内蒙古","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"辽宁","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"吉林","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"黑龙江","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"上海","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"江苏","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"浙江","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"安徽","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"福建","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"江西","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"山东","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"河南","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"湖北","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"湖南","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"广东","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"广西","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"海南","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"重庆","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"四川","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"贵州","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"云南","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"*","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"陕西","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"甘肃","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"青海","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"宁夏","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"*","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"*","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"香港","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null},{"AreaCode":"","AreaName":"澳门","ParentAreaCode":"","Root":false,"Zone":,"NavigateURL":null}]

JosnViewer---神兵利器!

JS实现Ajax,Josn数据的序列化和反序列化---例: 省市区联动(包含get,post)

JS实现Ajax代码

window.onload = function () {
LoadProv();
LoadCity();
LoadTown(); };//onload
 function LoadProv() {
//确认事件
//1.创建xhr对象
var xhr = null;
if (XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
//2.设置回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
//将响应的数据反序列化
var josnObj = eval('(' + xhr.responseText + ')');
for (var i = 0; i < josnObj.length; i++) {
var opt = document.createElement('option');
opt.value = josnObj[i].AreaCode;
opt.innerHTML = josnObj[i].AreaName;
document.getElementById('ddlProv').appendChild(opt);
}//for
document.getElementById('ddlProv').onchange();//内部调用自己的onchange事件,加载下一个下拉
}//if
}
//3.初始化xhr,三个参数,,提交方式,url,是否异步
xhr.open('get', 'Select.ashx?id=0001', true);
//4.发送请求
xhr.send(null);
}
 function LoadCity() {
//确认事件--改变事件
document.getElementById('ddlProv').onchange = function () {
//获取被选省份的id
var id = this.value;
//根据被选择的id加载市区
var xhr = null;
//1.创建xhr对象
if (XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (ActiveXObject) {
xhr = new ActiveXObject("Microsoft.Http");
}
//2.设置回调函数
xhr.onreadystatechange = function () {
//反序列化
var josnObj = eval(xhr.responseText);
document.getElementById('ddlCity').innerHTML = '';
if (xhr.readyState = 4 && xhr.status == 200) {
for (var i = 0; i < josnObj.length; i++) {
var opt = document.createElement('option');
opt.value = josnObj[i].AreaCode;
opt.text = josnObj[i].AreaName;
document.getElementById('ddlCity').appendChild(opt);
}
}
document.getElementById('ddlCity').onchange();
}
//3.初始化
xhr.open('post', 'Select.ashx', true);
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//4.发送
xhr.send('id=' + id);
};//onchange
}
function LoadTown() {
//确认事件
document.getElementById('ddlCity').onchange = function () {
var id = this.value;
var xhr = null;
//1.创建对象
if (XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (ActiveXObject) {
xhr = new ActiveXObject("Microsoft.Http");
}
//2.设置回掉函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
//反序列化响应,转化为josn格式
document.getElementById('ddlTown').innerHTML = '';
var josnObj = eval(xhr.responseText);
for (var i = 0; i < josnObj.length; i++) {
var opt = document.createElement('option');
opt.value = josnObj[i].AreaCode;
opt.text = josnObj[i].AreaName;
document.getElementById('ddlTown').appendChild(opt);
}
}
}
//3.初始化
xhr.open('post', 'SelectByPost.ashx', true);
//post 必备
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//4.发送
xhr.send('id=' + id);
};//onchange
<body>
<form id="form1" runat="server">
省:<asp:DropDownList ID="ddlProv" runat="server"></asp:DropDownList>
市:<asp:DropDownList ID="ddlCity" runat="server"></asp:DropDownList>
区/县:<asp:DropDownList ID="ddlTown" runat="server"></asp:DropDownList>
</form>
</body>
上一篇:sql 删除表中的重复记录


下一篇:JS的递归与TCO尾调用优化