Ajax实现联动效果

用到了地区的数据库

html代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="script/jquery-1.7.1.js"></script>
<script language="javascript">
$(document).ready(function () {
fillProv();//加载省份,加载省份的函数中调用了加载城市的函数,记载城市的函数调用了加载县市区的函数(为了防止异步传输页面加载不出东西)
//添加事件
//给省份添加事件
$("#ddlProv").change(function () {
fillCity();
});//change
$("#ddlCity").change(function () {
fillCountry();
});//change
});//ready function fillProv() {
$.ajax({
url: "LianDong.ashx",
data: { parent: "0001" },
type: "POST",
dataType: "XML",
success: function (data) {
//解析XML
$("#ddlProv").empty();//加载之前清空下拉
var arr = $(data).find("item");
for (var i = 0; i < arr.length; i++) {
var code = arr.eq(i).attr("code");
var name = arr.eq(i).attr("name");
//显示HTML
//var op = "<option value='" + code + "'>" + name + "</option>";
$("#ddlProv").append("<option value='" + code + "'>" + name + "</option>");
};//for
fillCity();
}//success
});//ajax
}
function fillCity()
{
var parent=$("#ddlProv").val();
$.ajax({
url: "LianDong.ashx",
data: { parent: parent },
type: "POST",
dataType: "XML",
success: function (data)
{
$("#ddlCity").empty();//加载之前清空下拉
//解析
var arr = $(data).find("item");
for (var i = 0; i < arr.length; i++) {
var code = arr.eq(i).attr("code");
var name = arr.eq(i).attr("name");
//显示HTML
$("#ddlCity").append("<option value='" + code + "'>" + name + "</option>");
}//for
fillCountry();
}//success
});//ajax
}
function fillCountry()
{
var parent = $("#ddlCity").val();
$.ajax({
url: "LianDong.ashx",
data: { parent: parent },
type: "POST",
dataType: "XML",
success: function (data)
{
$("#ddlCountry").empty();//加载之前清空下拉
//解析
var arr = $(data).find("item");
for (var i = 0; i < arr.length; i++) {
var code = arr.eq(i).attr("code");
var name = arr.eq(i).attr("name");
//显示
$("#ddlCountry").append("<option value='" + code + "'>" + name + "</option>");
}
}//success
});//ajax
} </script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlProv" runat="server"></asp:DropDownList>
<asp:DropDownList ID="ddlCity" runat="server"></asp:DropDownList>
<asp:DropDownList ID="ddlCountry" runat="server"></asp:DropDownList>
</div>
</form>
</body>
</html>

服务端代码:

public class LianDong : IHttpHandler {
private MyDBDataContext _Context = new MyDBDataContext();
public void ProcessRequest (HttpContext context) {
//获取请求过来的值
var s = context.Request["parent"];
StringBuilder sb = new StringBuilder();//命名空间using System.Text;
string rel = null;
//根据请求过来的值查询相应的数据
var query = this._Context.ChinaStates.Where(r => r.ParentAreaCode == s);
if (query.Count()>)
{
foreach (ChinaStates data in query)
{
sb.Append("<item code='" + data.AreaCode + "' name='" + data.AreaName + "'/>");
}
}
//回发xml
rel = sb.ToString();
context.Response.Write("<?xml version='1.0'?>");
context.Response.Write("<root>");
context.Response.Write(rel);
context.Response.Write("</root>");
context.Response.End();
}
上一篇:Java学习笔记五(多线程)


下一篇:maven win 安装 与 IntelliJ IDEA 配置Maven【2018-11-14最新最有姿势攻略】