jQuery+ajax城市联动
2024-09-07 20:51:44
分享一下自己最近写的城市联动。技术使用ajax+jQuery实现。
首先请看前台的javascript代码。
以下是连个实现异步加载的方法。
<script type="text/javascript">
$(function () {
loadProvince();
loadCity();
}); function loadProvince() {
$.ajax({
type: "get",
url: "province_city.ashx",
data: "pid=-1",
async: false,//同步
success: function (json) {
var jsons = eval(json);
var province = document.getElementById("province");
for (var i = 0; i < jsons.length; i++) {
var p = jsons[i];
if (p.Pid == -1) {
var option = document.createElement("option");
option.value = p.Id;
option.innerHTML = p.Name;
province.appendChild(option);
}
}
}
});
};
//加载市
function loadCity() {
city.innerHTML = "";//清空控件内容
var pid = document.getElementById("province").value;//获得省的pid
$.ajax({
type: "get",
url: "province_city.ashx",
data: "pid=" + pid,
success: function (json) {
var jsons = eval(json);
var city = document.getElementById("city");
for (var i = 0; i < jsons.length; i++) {
var c = jsons[i];
var option = document.createElement("option");
option.value = c.Id;
option.innerHTML = c.Name;
city.appendChild(option);
}
}
});
};
</script>
在使用前请引用jQuery。
后台的代码用的ashx.
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string s= context.Request.QueryString["pid"];
int pid;
if (int.TryParse(s,out pid))
{
string json = GetDataByPid(pid);
context.Response.Write(json);
}
} private string GetDataByPid(int pid)
{
List<Data> list = GetAllDatas(); List<Data> datas = new List<Data>(); foreach (Data item in list)
{
if (item.Pid == pid)
{
datas.Add(item);
}
}
//把对象转换成json格式的字符串
JavaScriptSerializer jss = new JavaScriptSerializer();
string json = jss.Serialize(datas);
return json;
}
private List<Data> GetAllDatas()
{
List<Data> list = new List<Data>(); list.Add(new Data() { Id = , Name = "河南省", Pid = - });
list.Add(new Data() { Id = , Name = "台湾省", Pid = - });
list.Add(new Data() { Id = , Name = "日本省", Pid = - }); list.Add(new Data() { Id = , Name = "郑州市", Pid = });
list.Add(new Data() { Id = , Name = "济源市", Pid = });
list.Add(new Data() { Id = , Name = "焦作市", Pid = }); list.Add(new Data() { Id = , Name = "高雄市", Pid = });
list.Add(new Data() { Id = , Name = "台北", Pid = });
list.Add(new Data() { Id = , Name = "台中", Pid = }); list.Add(new Data() { Id = , Name = "东京", Pid = });
list.Add(new Data() { Id = , Name = "冲绳", Pid = });
list.Add(new Data() { Id = , Name = "大阪", Pid = });
return list;
}
最新文章
- angular2系列教程(九)Jsonp、URLSearchParams、中断选择数据流
- 说说BPM数据表和日志表中几个状态字段的详细解释
- Fast Fourier Transform
- 判断iframe是否加载完成的完美方法
- java 读取文件路径空格和中文的处理
- URAL1410. Crack
- 利用Jquery实现http长连接(LongPoll)
- (转) ThinkPHP模板自定义标签使用方法
- [转] Hive 内置函数
- 【CTSC1999】【解救大兵瑞恩】
- Detours信息泄漏漏洞
- OpenGL ES着色器语言之操作数(官方文档第五章)
- 前端笔记之JavaScript(十二)缓冲公式&;检测设备&;Data日期
- python ";import this";
- [P5170] 类欧几里得算法
- AtCoder Regular Contest 099 (ARC099) E - Independence 二分图
- Interllij IDEA中启动web项目
- hdu2328 Corporate Identity【string库使用】【暴力】【KMP】
- Redis(一)入门
- window系统更新导致很多服务出错
热门文章
- Hdu 5442 Favorite Donut (2015 ACM/ICPC Asia Regional Changchun Online 最大最小表示法 + KMP)
- Codeforces Round #418 (Div. 2) A
- Eclipse 运行内存不足情况
- RHEL 6.5 ----Postfix邮件服务器
- Solr打分排序规则自定义【转】
- hash 【模板】
- Jquery 中使用String.Format
- disconf 分布式配置
- Oracle的数据伪列(ROWNUM)
- liunx中安装软件的几种方式