Ajax réalise le partage de la force du chargement dynamique des données

Cet article présente principalement en détail un petit exemple de chargement dynamique de données Ajax. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère que cela pourra aider tout le monde.

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

2. Code principal de la première page

Description : 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.

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

3. Mes conditions de requête

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

4. cette société à titre d'exemple)

4.1 Code JavaScript à la réception

  //打开页面的时候执行
  window.onunload = initCompanySelect();
  //初始化“公司”下拉框
  function initCompanySelect()
  {
    $.ajax({
      type: 'POST',
      url: '/Home/GetCompantListForPhone',
      dataType: 'json',
      data: { },
      success: function (data) {
        //1.清空这个下拉框的数据
        // $('#company option').remove();//也能成功实现
        $('#company').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("操作失败！");
      }
    })
  }

4.2 Code ActionResult correspondant à la liste déroulante d'initialisation

/// <summary>
/// 获取电话查询公司下拉数据
/// </summary>
/// <returns></returns>
[HttpPost]
public JsonResult GetCompantListForPhone()
{
  
  compantList = 从数据库获取这个下拉框数据的集合；
  return Json(compantList);
}

Après que les deux autres listes déroulantes soient 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.

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

//根据条件查询电话
  function QueryPhoneNum()
  {
    if ($('#group').val() == '==请选择小组==')
    {
      return;
    }
    number = 0;
    $.ajax({
      type: 'POST',
      url: '/Home/PhoneSearchSubmit',
      dataType: 'json',
      data: {
        company:$('#company').val(),
        dept: $('#department').val(),
        group: $('#group').val()
      },
      success: function (phoneList) {
        //1.清空这个表格的数据
        $('#todeListTBODY tr').remove();
        
        //2.将返回值动态加载进表格。
        $.each(phoneList, function (index, element) {
          number = number + 1;
          $('#todeListTBODY').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("操作失败！");
      }
    })
  }

5.1 ActionResult correspondant aux données de la requête

/// <summary>
/// 电话查询
/// </summary>
/// <returns></returns>
[HttpPost]
public JsonResult PhoneSearchSubmit(string company, string dept, string group)
{
  phoneList = 根据条件查询数据；
  return Json(phoneList);
}

Recommandations associées :

Explication détaillée de l'exemple de chargement dynamique d'une liste déroulante à l'aide d'Ajax

JavaScript utilise Ajax pour charger dynamiquement la case à cocher CheckBox

Comment Java implémente des exemples de code chargés dynamiquement

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!