ajax實現無刷新省市縣三級聯動

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> ajax實現無刷新省市縣三級聯動

ajax實現無刷新省市縣三級聯動

編輯：AJAX基礎知識

本文實例為大家分享了ajax實現無刷新省市縣三級聯動的具體代碼，供大家參考，具體內容如下

效果圖：

實現代碼：

1、html：

<html>
<head>
  <title></title>
    <style type="text/css">
    select
    {
      width: 150px;
    }
  </style>
  <script src="js/Jquery1.7.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $.ajax({
        type: "post",
        contentType: "application/json",
        url: "WebService1.asmx/GetProvince",
        data: "{}",
        success: function (result) {
          var stroption = '';
          for (var i = 0; i < result.d.length; i++) {
            stroption += '<option value=' + result.d[i].provinceID + '>';
            stroption += result.d[i].provincename;
            stroption += '</option>';
          }
          $('#seprovince').append(stroption);
        }
      })


      $('#seprovince').change(function () {
       $('#secity option:gt(0)').remove();
        $('#searea option:gt(0)').remove();

        $.ajax({
          type: "post",
          contentType: "application/json",
          url: "WebService1.asmx/GetCItyByPro",
          data: "{proid:'" + $(this).val() + "'}",
          success: function (result) {
            var strocity = '';
            for (var i = 0; i < result.d.length; i++) {
              strocity += '<option value=' + result.d[i].cityID + '>';
              strocity += result.d[i].cityname;
              strocity += '</option>';
            }
            $('#secity').append(strocity);
          }
        })
      })


      $('#secity').change(function () {
        $('#searea option:gt(0)').remove();
        $.ajax({
          type: "post",
          contentType: "application/json",
          url: "WebService1.asmx/GetAreaByCity",
          data: "{cityid:'" + $(this).val() + "'}",
          success: function (result) {
            var stroarea = '';
            for (var i = 0; i < result.d.length; i++) {
              stroarea += '<option value=' + result.d[i].areaID + '>';
              stroarea += result.d[i].areaname;
              stroarea += '</option>';
            }
            $('#searea').append(stroarea);
          }
        })
      })
    })
  </script>
</head>
<body>
 <table>
    <tr>
      <td>
        用戶名
      </td>
      <td>
        <input id="Text1" type="text" />
      </td>
    </tr>
    <tr>
      <td>
        密碼
      </td>
      <td>
        <input id="Text2" type="text" />
      </td>
    </tr>
    <tr>
      <td>
        確認密碼
      </td>
      <td>
        <input id="Text3" type="text" />
      </td>
    </tr>
    <tr>
      <td>
        郵箱
      </td>
      <td>
        <input id="Text4" type="text" />
      </td>
    </tr>
    <tr>
      <td>
        地址
      </td>
      <td>
        <select id="seprovince">
          <option>--請選擇--</option>
        </select>
        省
        <select id="secity">
          <option>--請選擇--</option>
        </select>市
        <select id="searea">
          <option>--請選擇--</option>
        </select>縣
      </td>
    </tr>
  </table>
</body>
</html>

2、WebService1.asmx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;


namespace 省市縣三級聯動
{
  /// <summary>
  /// WebService1 的摘要說明
  /// </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 WebService1 : System.Web.Services.WebService
  {


    [WebMethod]
    public string HelloWorld()
    {
      return "Hello World";
    }
    [WebMethod]
    public List<Model.province> GetProvince()
    {
      BLL.province bpro = new BLL.province();
      List<Model.province> list = bpro.GetListModel();
      return list;
    }
    [WebMethod]
    public List<Model.city> GetCItyByPro(string proid)
    {
      BLL.city bcity = new BLL.city();
      List<Model.city> list = bcity.GetListModel("father='" + proid + "'");
      return list;
    }
    [WebMethod]
    public List<Model.area> GetAreaByCity(string cityid)
    {
      BLL.area barea = new BLL.area();
      List<Model.area> list = barea.GetListModel("father='" + cityid + "'");
      return list;
    }
  }
}

在三層的Bll層中的city.cs和area.cs中分別添加以下屬性

//city.cs：
  public List<Model.city> GetListModel(string strsql)
    {
      return dal.GetListModel(strsql);
    }
//area.cs：
   public List<Model.area> GetListModel(string strsql)
    {
      return dal.GetListModel(strsql);
    }

在三層的DAL層中的city.cs和area.cs中分別添加以下方法

//city.cs：
public System.Collections.Generic.List<Model.city> GetListModel(string strsql)
    {
      System.Collections.Generic.List<Model.city> list = new System.Collections.Generic.List<Model.city>();
      DataTable dt = GetList(strsql).Tables[0];
      foreach (DataRow row in dt.Rows)
      {
        Model.city mcity = new Model.city();
        mcity.id = Convert.ToInt32(row["id"]);
        mcity.cityID = row["cityID"].ToString();
        mcity.cityname = row["cityname"].ToString();
        list.Add(mcity);
      }
      return list;
    }
//area.cs：
  public System.Collections.Generic.List<Model.area> GetListModel(string strsql)
    {
      DataTable dt = GetList(strsql).Tables[0];
      System.Collections.Generic.List<Model.area> list = new System.Collections.Generic.List<Model.area>();
      foreach (DataRow row in dt.Rows)
      {
        Model.area marea = new Model.area()
        {
          id = Convert.ToInt32(row["id"]),
          areaID = row["areaID"].ToString(),
          areaname = row["areaname"].ToString()
        };
        list.Add(marea);
      }
      return list;
    }

以上就是本文的全部內容，希望對大家的學習有所幫助。

AJAX基礎知識

零基礎學習AJAX之制作自動校驗的表單: 傳統網頁在注冊時檢測用戶名是否被占用，傳統的校驗顯然緩慢笨拙。當ajax出現後，這種體驗有了很大的改
Jquery版本導致Ajax不執行success回調函數: 對於使用ajax來請求數據已經不是第一次使用（一直覺得也就那麼回事），就在昨天居然遇到了一個問題？項
Ajax請求過程中下載文件在FireFox(火狐)浏覽器下的兼容問題: 需求很簡單，點擊一個文件鏈接下載該文件，同時向後台發送請求。需求很常見，用戶點擊下載後通常要進行下載

AJAX基礎知識 AJAX詳解

小編推薦

SSH+Jquery+Ajax框架整合 jQuery Ajax使用心得詳細整理及注意事項解決ajax跨域請求數據cookie丟失問題實例代碼講解ajax實現的無刷新分頁詳解如何實現最基本的AJAX框架 Ajax學習筆記整理 AJAX開發簡略 (第二部分) IE下jquery ajax無法獲得最新數據的問題解決(IE緩存) AJAX打造博客無刷新搜索 Web2.0時代的核心應用：Ajax簡介

DIV CSS 佈局教程網

相關文章