AJAX版省市区三级联动下拉框

最新推荐文章于 2019-04-25 11:36:18 发布

xcplates

最新推荐文章于 2019-04-25 11:36:18 发布

阅读量2.9k

点赞数 1

文章标签： ajax xmlhttprequest dataset server function asp

本文链接：https://blog.csdn.net/xcplates/article/details/1769550

版权

AJAX版省市区三级联动下拉框

结合网上的一些代码，今天学习了一下AJAX的简单应用。写了一个AJAX版省市区三级联动下拉框。

源码下载：http://download.csdn.net/user/xcplates/AJAX ，里面说实验数据说明

主要有两个页面：default.aspx 和getResult.aspx

default.aspx的内容：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
<script type="text/javascript" language="javascript" >
   /* Create a new XMLHttpRequest object to talk to the Web server */
   var xmlHttp = false;
   /*@cc_on @*/
   /*@if (@_jscript_version >= 5)
   try {
         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
       }
catch (e)
       {
        try
                {
                   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
       catch (e2)
                {
                        xmlHttp = false;
                 }
     }
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
function callServer() {
var ProvinceID = document.getElementById("drpProvince").value;
if ((ProvinceID == null) || (ProvinceID == "")) return;
var url = "getResult.aspx?fdm=" + escape(ProvinceID) ;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = updatePage1;
xmlHttp.send(null);
}
function callServer2() {
var ProvinceID = document.getElementById("drpCity").value;
if ((ProvinceID == null) || (ProvinceID == "")) return;
var url = "getResult.aspx?fdm=" + escape(ProvinceID) ;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = updatePage2;
xmlHttp.send(null);
}

</script>

default.aspx.cs的内容：

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections;
using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //调用客户端的方法
            this.drpProvince.Attributes.Add("onchange", "callServer()");
            this.drpCity.Attributes.Add("onchange", "callServer2()");

            //绑定省份
            this.ProvinceBind();
        }
    }
    public void ProvinceBind() //绑定省数据
    {

        SqlConnection con = new SqlConnection("uid=asptest;pwd=asptest;database=aspTest");
        SqlCommand cmd = new SqlCommand("select sm,id from city   where fdm=0", con);
        con.Open();

SqlDataAdapter MySqlAdapter = new SqlDataAdapter(cmd);
DataSet MyDataSet = new DataSet();

MySqlAdapter.Fill(MyDataSet, "city");

        this.drpProvince.DataSource = MyDataSet;
        this.drpProvince.DataTextField = "sm";
        this.drpProvince.DataValueField = "id";
        this.drpProvince.DataBind();
        if (this.drpProvince.Items.Count >0 )
        {
            drpCityBind(this.drpProvince.Items[0].Value);
        }
    }
    public void drpCityBind(string fdm)//绑定市数据
    {
        SqlConnection con = new SqlConnection("uid=asptest;pwd=asptest;database=aspTest");
        SqlCommand cmd = new SqlCommand("select dq,id from city   where fdm="+fdm, con);
        con.Open();

SqlDataAdapter MySqlAdapter = new SqlDataAdapter(cmd);
DataSet MyDataSet = new DataSet();

MySqlAdapter.Fill(MyDataSet, "city");

        this.drpCity.DataSource = MyDataSet;
        this.drpCity.DataTextField = "dq";
        this.drpCity.DataValueField = "id";
        this.drpCity.DataBind();
     }

}

服务端处理代码：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

public partial class getResult : System.Web.UI.Page
{
    public SqlDataAdapter MyDataAdapter = new SqlDataAdapter();
    public DataSet MyDataSet;

    private void Page_Load(object sender, System.EventArgs e)
        {

            if (!IsPostBack)
            {
                string ProvinceID = Request["fdm"].ToString();
                if (ProvinceID.Length > 0)
                {
                    Response.Clear();

                    SqlConnection con = new SqlConnection("uid=asptest;pwd=asptest;database=aspTest");
                    MyDataSet = new DataSet("city");
                    SqlCommand MyCommand =new SqlCommand() ;
                    MyCommand.Connection =con;
                    MyCommand.CommandType = CommandType.Text
;
                    MyDataAdapter.TableMappings.Add("Table", "city");
                    MyCommand.CommandText = "select * from city where fdm=" + ProvinceID;
                    MyDataAdapter.SelectCommand = MyCommand;
                    MyDataAdapter.Fill(MyDataSet);

                    string chString = MyDataSet.GetXml();
                    Response.Clear();
                    Response.ContentType = "text/xml";

                    Response.Write(chString);
                    Response.End();
                }
                else
                {
                    Response.Clear();
                    Response.End();
                }
            }
            else
            {
                Response.Clear();
                Response.End();
            }
        }

}
源码下载：http://download.csdn.net/user/xcplates/AJAX ，里面说实验数据说明

xcplates

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX版省市区三级联动下拉框

AJAX版省市区三级联动下拉框结合网上的一些代码，今天学习了一下AJAX的简单应用。写了一个AJAX版省市区三级联动下拉框。源码下载：http://download.csdn.net/user/xcplates/AJAX ，里面说实验数据说明主要有两个页面：default.aspx 和getResult.aspxdefault.aspx的内容：http://www.w3.
复制链接

扫一扫