無刷新省市縣三級聯動(AJAX/WebService)

前臺代碼

<%@ Page Language="C#" AutoEventWireup="true"  CodeBehind="無刷新省市縣三聯動.aspx.cs" Inherits="無刷新省市三聯動.無刷新省市縣三聯動" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "post",
                contentType: "application/json",
                url: "Web省市縣.asmx/Getsheng",
                data: "{}",
                success: function (result) {
                    var stroption = null;
                    for (var i = 1; i <= result.d.length; i++) {
                        stroption = '<option value=' + result.d[i][0] + '>';
                        stroption += result.d[i][1];
                        stroption += '</option>';
                        $('#ddlsheng').append(stroption);
                    }
                },
                error: function () {
                    alert('加載失敗');
                }
            });
            $('#ddlsheng').change(function () {
                //alert($(this).val());
                $('#ddlshi option:gt(0)').remove();
                $.ajax({
                    type: 'post',
                    contentType: 'application/json',
                    url: 'Web省市縣.asmx/Getshi',
                    data: "{provinceid:'" + $(this).val() + "'}",
                    success: function (result) {
                        var strshi = null;
                        for (var i = 1; i <= result.d.length; i++) {
                            strshi = '<option value=' + result.d[i][0] + '>';
                            strshi += result.d[i][1];
                            strshi += '</option>';
                            $('#ddlshi').append(strshi);
                        }
                    },
                    error: function () { alert('加載失敗') }
                })
            });


            $('#ddlshi').change(function () {
                $('#ddlxian option:gt(0)').remove();
                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "Web省市縣.asmx/Getxian",
                    data: "{cityid:'" + $(this).val() + "'}",
                    success: function (result) {
                        var strxian = null;
                        for (var i = 0; i < result.d.length; i++) {
                            strxian = '<option value=' + result.d[i][0] + '>';
                            strxian += result.d[i][1];
                            strxian += '</option>';
                            $('#ddlxian').append(strxian);
                        }
                    },
                    error: function () { alert('加載失敗') }
                })
            })
        })


    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        省:<select id="ddlsheng"><option>----請選擇----</option></select>
        市:<select id="ddlshi"><option>--請選擇--</option></select>
        縣:<select id="ddlxian"><option>--請選擇--</option></select>
    </div>
    
    </form>
</body>
</html>

WebService頁面代碼

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;


namespace 無刷新省市三聯動
{
    /// <summary>
    /// Web省市縣 的摘要說明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允許使用 ASP.NET AJAX 從腳本中調用此 Web 服務,請取消對下行的註釋。
    [System.Web.Script.Services.ScriptService]
    public class Web省市縣 : System.Web.Services.WebService
    {


        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }
        [WebMethod]
        //加載省
        public List<string[]> Getsheng()
        {
            List<string[]> list = new List<string[]>();
            string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            SqlConnection conn = new SqlConnection(constr);
            SqlCommand cmd =conn.CreateCommand();
            conn.Open();
            cmd.CommandText = "Pro_province";
            cmd.CommandType = CommandType.StoredProcedure;
            SqlDataAdapter adapter = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            adapter.Fill(dt);
            cmd.Dispose();
            conn.Dispose();
            foreach (DataRow item in dt.Rows)
            {
                string[] arraysheng = new string[2];
                arraysheng[0] = item[1].ToString();
                arraysheng[1] = item[2].ToString();
                list.Add(arraysheng);
            }
            return list;
        }
        //加載市
        [WebMethod]
        public List<string[]> Getshi(string provinceid)
        {
            //string provinceid = "";
            List<string[]> list = new List<string[]>();
            string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            SqlConnection conn = new SqlConnection(constr);
            SqlCommand cmd = conn.CreateCommand();
            conn.Open();
            cmd.CommandText = "Pro_city";
            
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@fatherid", provinceid);
            SqlDataAdapter adapter = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            adapter.Fill(dt);
            cmd.Dispose();
            conn.Dispose();
            foreach (DataRow item in dt.Rows)
            {
                string[] arrayshi = new string[2];
                arrayshi[0] = item[0].ToString();
                arrayshi[1] = item[1].ToString();
                list.Add(arrayshi);
            }
            return list;
        }
        //加載縣
        [WebMethod]
        public List<string[]> Getxian(string cityid)
        {
            List<string[]> list = new List<string[]>();
            string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            SqlConnection conn = new SqlConnection(constr);
            SqlCommand cmd = conn.CreateCommand();
            conn.Open();
            cmd.CommandText = "pro_area";
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@cityid", cityid);
            SqlDataAdapter adapter = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            adapter.Fill(dt);
            cmd.Dispose();
            conn.Dispose();
            foreach (DataRow item in dt.Rows)
            {
                string[] arrayxian = new string[2];
                arrayxian[0] = item[0].ToString();
                arrayxian[1] = item[1].ToString();
                list.Add(arrayxian);
            }
            return list;
        }
    }
}

 數據庫存儲過程代碼

create proc Pro_province//建立省的存儲過程
as 
select * from province
go
exec Pro_province//執行存儲過程

drop proc Pro_area//刪除存儲過程


create proc pro_city //建立市的存儲過程
@fatherid varchar(10)
as
select cityID,city from city where father=@fatherid;
GO

create proc pro_area  //建立縣的存儲過程
@cityid varchar(10)
as
select areaID,area from area where father=@cityid;
GO

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章