So verwenden Sie Ajax zum dynamischen Laden von Daten

Dieses Mal zeige ich Ihnen, wie Sie Ajax zum dynamischen Laden von Daten verwenden. Was sind die Vorkehrungen für das dynamische Laden von Daten mit Ajax? Das Folgende ist ein praktischer Fall.

Vorwort:

1. Dieser Aufsatz implementiert ein Beispiel für das dynamische Laden von Ajax.

2. Implementiert mit dem .net MVC-Framework.

3. Dieses Beispiel konzentriert sich auf die Front-End- und Back-End-Interaktionen, die anderen werden abgekürzt.

Start:

1.ControllerActionResult-Code (wird zum Anzeigen der Seite verwendet)

    /// <summary>
    /// 电话查询页面
    /// </summary>
    /// <returns></returns>
    public ActionResult PhoneSearch(string sql)
    {
      phoneList=从数据库查询数据；
      ViewBag.phoneList = phoneList;
      return View();
    }

Vorne Desk Hauptcode der Seite

Beschreibung: Dies ist die Tabelle zur Anzeige der Daten, und die darin enthaltenen Felder müssen mit dem von Ihnen erstellten Modell übereinstimmen.

<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. Meine Abfragebedingungen

 <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. Initialisierung der Abfragebedingungen (nehmen Sie das Unternehmen als Beispiel)

4.1 Frontend JavaScript Code

  //打开页面的时候执行
  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($('<option>' + '==请选择公司==' + '</option>'));
        //2.将返回值动态加载进下拉框，动态生成标签。
        for (i = 0; i < data.length;i++)
        {
          $("#company").append($(&#39;<option >' + data[i].Conpany + '</option>'));
        }
      },
      error: function (XMLHttpRequest, textStatus, errorThown) {
        alert("操作失败！");
      }
    })
  }

4.2 Initialisieren Sie den ActionResult-Code, der dem Dropdown-Feld entspricht

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

Nachdem die beiden anderen Dropdown-Felder auf diese Weise ausgefüllt wurden. Sie können eine Abfrage basierend auf Bedingungen durchführen. Die folgenden beiden sind JavaScript- und Hintergrundmethoden, die zusammen verwendet werden.

5. Senden Sie die Abfrage an den Hintergrund und weisen Sie die Tabelle dann basierend auf dem zurückgegebenen Satz neu zu.

//根据条件查询电话
  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 entsprechend den Abfragedaten

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier Verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So behandeln Sie Fehler bei der Rückgabe von JSON-Daten an Ajax in Spring MVC

So laden Sie Dateien hoch über Ajax Progress Bar Codular

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Ajax zum dynamischen Laden von Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!