recherche

Maison >interface Web >js tutoriel >Lien à trois niveaux entre les provinces, les villes et les comtés sans rafraîchissement ajax

Lien à trois niveaux entre les provinces, les villes et les comtés sans rafraîchissement ajax

php中世界最好的语言
php中世界最好的语言original
2018-04-04 15:15:561285parcourir

Cette fois, je vais vous présenter la liaison à trois niveaux des provinces, des villes et des comtés lorsque l'ajax ne s'actualise pas. Quelles sont les précautions pour réaliser la liaison à trois niveaux des provinces, des villes et des comtés sans. ajax rafraîchissant. Ce qui suit est un cas pratique. Levez-vous et jetez un œil.

L'exemple de cet article partage avec vous le code spécifique d'ajax pour réaliser une liaison à trois niveaux de provinces, de villes et de comtés sans actualiser pour votre référence. Le contenu spécifique est le suivant

<.>Rendu :

Code d'implémentation :

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 += &#39;<option value=&#39; + result.d[i].provinceID + &#39;>';
            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 += &#39;<option value=&#39; + result.d[i].cityID + &#39;>';
              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 += &#39;<option value=&#39; + result.d[i].areaID + &#39;>';
              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;
    }
  }
}
Ajoutez les attributs suivants à city.cs et area.cs. dans la couche Bll à trois couches

//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);
    }
Ajoutez les méthodes suivantes dans city.cs et Area.cs respectivement dans la couche DAL à trois couches

//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;
    }
Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article, plus Veuillez faire attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

AJAX implémente le chargement après l'affichage de la page

Comment AJAX implémente-t-il l'actualisation asynchrone et l'actualisation partielle

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php ajax html 异步
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：L'implémentation AJAX affiche la page avant le chargementArticle suivant：L'implémentation AJAX affiche la page avant le chargement

Articles Liés

Voir plus