Maison > interface Web > js tutoriel > le corps du texte

Ajax implémente le chargement dynamique des données

亚连
Libérer: 2018-05-22 15:30:55
original
2262 Les gens l'ont consulté

Cet article présente principalement en détail un petit exemple de chargement dynamique de données Ajax, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Avant-propos :

1. Cet essai implémente un exemple de chargement dynamique Ajax.

2. Implémenté à l'aide du framework .net MVC.

3. Cet exemple se concentre sur les interactions front-end et back-end, et les autres sont abrégés.

Démarrer :

1. Code ActionResult du contrôleur (utilisé pour afficher la page)

    /// <summary>
    /// 电话查询页面
    /// </summary>
    /// <returns></returns>
    public ActionResult PhoneSearch(string sql)
    {
      phoneList=从数据库查询数据;
      ViewBag.phoneList = phoneList;
      return View();
    }
Copier après la connexion
2. 🎜>

Explication : Il s'agit du tableau pour afficher les données, et les champs qu'il contient doivent correspondre au modèle que vous avez construit.

3. Mes conditions de requête
<table border="1" cellspacing="0" cellpadding="0" class="toLang" id="phoneTable">
              <tr>
                <th>序号</th>
                <th>公司</th>
                <th>部门</th>
                <th>小组</th>
                <th>姓名</th>
                <th>职位</th>
                <th>电话</th>
              </tr>
              <tbody id="todeListTBODY">
                @if (ViewBag.phoneList != null)
              {
                foreach (var item in ViewBag.phoneList)
                {
                  number = number + 1;
              <tr>
                <td>@number</td>
                <td>@item.Conpany</td>
                <td>@item.Department</td>
                <td>@item.Team</td>
                 <td>@item.Name</td>
                 <td>@item.Position</td>
                 <td>@item.PhoneNumber</td>
                  </tr>
                }
              }
              </tbody>
            </table>
Copier après la connexion

4. Initialisation des conditions de requête (prendre l'entreprise comme exemple)
 <p style="display:block;float:left; width:100%; ">
          公司:
          <select class="InputTestStyle" id="company" onclick="initDeptSelect()">
            <option>==请选择公司==</option>
          </select>
          部门:
          <select class="InputTestStyle" id="department" onclick="initGroupSelect()">
            <option>==请选择公司==</option>
          </select>
          小组:
          <select class="InputTestStyle" id="group" onclick="QueryPhoneNum()">
            <option>==请选择公司==</option>
          </select>
 </p>
Copier après la connexion

4.1 Code JavaScript front-end

4.2 Initialiser le code ActionResult correspondant à la liste déroulante
  //打开页面的时候执行
  window.onunload = initCompanySelect();
  //初始化“公司”下拉框
  function initCompanySelect()
  {
    $.ajax({
      type: &#39;POST&#39;,
      url: &#39;/Home/GetCompantListForPhone&#39;,
      dataType: &#39;json&#39;,
      data: { },
      success: function (data) {
        //1.清空这个下拉框的数据
        // $(&#39;#company option&#39;).remove();//也能成功实现
        $(&#39;#company&#39;).empty();
        $("#company").append($(&#39;<option>&#39; + &#39;==请选择公司==&#39; + &#39;</option>&#39;));
        //2.将返回值动态加载进下拉框,动态生成标签。
        for (i = 0; i < data.length;i++)
        {
          $("#company").append($(&#39;<option >&#39; + data[i].Conpany + &#39;</option>&#39;));
        }
      },
      error: function (XMLHttpRequest, textStatus, errorThown) {
        alert("操作失败!");
      }
    })
  }
Copier après la connexion

Une fois les deux autres listes déroulantes complétées selon cette méthode. Vous pouvez interroger en fonction de conditions. Les deux méthodes suivantes sont des méthodes JavaScript et d'arrière-plan utilisées conjointement.
/// <summary>
/// 获取电话查询公司下拉数据
/// </summary>
/// <returns></returns>
[HttpPost]
public JsonResult GetCompantListForPhone()
{
  
  compantList = 从数据库获取这个下拉框数据的集合;
  return Json(compantList);
}
Copier après la connexion

5. Soumettez la requête en arrière-plan, puis réaffectez la table en fonction de l'ensemble renvoyé.

5.1 ActionResult correspondant aux données de la requête
//根据条件查询电话
  function QueryPhoneNum()
  {
    if ($(&#39;#group&#39;).val() == &#39;==请选择小组==&#39;)
    {
      return;
    }
    number = 0;
    $.ajax({
      type: &#39;POST&#39;,
      url: &#39;/Home/PhoneSearchSubmit&#39;,
      dataType: &#39;json&#39;,
      data: {
        company:$(&#39;#company&#39;).val(),
        dept: $(&#39;#department&#39;).val(),
        group: $(&#39;#group&#39;).val()
      },
      success: function (phoneList) {
        //1.清空这个表格的数据
        $(&#39;#todeListTBODY tr&#39;).remove();
        
        //2.将返回值动态加载进表格。
        $.each(phoneList, function (index, element) {
          number = number + 1;
          $(&#39;#todeListTBODY&#39;).prepend(function (i) {
            return "<tr>" +
               "<td>" +number +
               "<td>" + element.Conpany +
               "<td>" + element.Department +
               "<td>" + element.Team +
               "<td>" + element.Name +
               "<td>" + element.Position +
               "<td>" + element.PhoneNumber +
               "</tr>";
          })
        })
      },
      error: function (XMLHttpRequest, textStatus, errorThown) {
        alert("操作失败!");
      }
    })
  }
Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.
/// <summary>
/// 电话查询
/// </summary>
/// <returns></returns>
[HttpPost]
public JsonResult PhoneSearchSubmit(string company, string dept, string group)
{
  phoneList = 根据条件查询数据;
  return Json(phoneList);
}
Copier après la connexion

Articles connexes :

Messages HTTP et

ajaxConnaissances de base

Explication des exemples de technologie de requête asynchrone Ajax

Principe de la requête cross-domain Ajax (tutoriel image et texte)

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal