Dreistufige Verbindung zwischen Provinzen, Städten und Kreisen ohne Ajax-Refreshing-js-Tutorial-php.cn

Dreistufige Verbindung zwischen Provinzen, Städten und Kreisen ohne Ajax-Refreshing

php中世界最好的语言

Freigeben： 2018-04-04 15:15:56

Original

1263 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die dreistufige Verknüpfung von Provinzen, Städten und Landkreisen vorstellen, wenn Ajax nicht aktualisiert wird. Was sind die Vorsichtsmaßnahmen, um die dreistufige Verknüpfung von Provinzen, Städten und Landkreisen ohne zu realisieren? Ajax erfrischend. Das Folgende ist ein praktischer Fall.

Das Beispiel in diesem Artikel teilt Ihnen den spezifischen Code von Ajax mit, um eine dreistufige Verknüpfung von Provinzen, Städten und Landkreisen zu erreichen, ohne dass eine Aktualisierung erforderlich ist. Der spezifische Inhalt lautet wie folgt:

Rendering:

Implementierungscode:

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 += &#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>

Nach dem Login kopieren

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;
    }
  }
}

Nach dem Login kopieren

Fügen Sie die folgenden Attribute zu city.cs und area.cs hinzu in der dreischichtigen Bll-Schicht

//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);
    }

Nach dem Login kopieren

Fügen Sie die folgenden Methoden in city.cs bzw. area.cs in der dreischichtigen DAL-Schicht hinzu

//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;
    }

Nach dem Login kopieren

Ich glaube, Sie haben es gemeistert Nachdem Sie den Fall in diesem Artikel gelesen haben, erfahren Sie mehr über die Methode. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

AJAX implementiert das Laden nach der Anzeige der Seite

Wie implementiert AJAX die asynchrone und teilweise Aktualisierung

Das obige ist der detaillierte Inhalt vonDreistufige Verbindung zwischen Provinzen, Städten und Kreisen ohne Ajax-Refreshing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!