Ajax realizes the sharing of the strength of dynamically loading data-PHP Tutorial-php.cn

Ajax realizes the sharing of the strength of dynamically loading data

小云云

Release： 2023-03-18 14:08:02

Original

1948 people have browsed it

This article mainly introduces in detail a small example of Ajax dynamic loading of data. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Foreword:

1. This essay implements an example of Ajax dynamic loading.

2. Implemented using the .net MVC framework.

3. This example focuses on the front-end and back-end interactions, and the others are abbreviated.

Start:

1. Controller ActionResult code (used to display the page)

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

Copy after login

2. Main code of the front page

Description: This is the table to display data, and the fields in it must match the model you have built.

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

Copy after login

3. My query conditions

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

Copy after login

4. Initialization of query conditions (take the company as an example )

4.1 JavaScript code at the front end

//打开页面的时候执行
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("操作失败！");
    }
  })
}

Copy after login

4.2 ActionResult code corresponding to the initialization drop-down box

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

Copy after login

After the other two drop-down boxes are completed according to this method. You can query based on conditions. The following two are JavaScript and background methods used in conjunction.

5. Submit the query to the background, and then reassign the table based on the returned set.

//根据条件查询电话
  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("操作失败！");
      }
    })
  }

Copy after login

5.1 ActionResult corresponding to the query data

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

Copy after login

Related recommendations:

Ajax realizes the detailed explanation of the dynamic loading of the combo box example

JavaScript uses Ajax to dynamically load the CheckBox check box

How to implement it in Java Dynamically loaded code example

The above is the detailed content of Ajax realizes the sharing of the strength of dynamically loading data. For more information, please follow other related articles on the PHP Chinese website!