How to use Ajax to dynamically load data

php中世界最好的语言
Release: 2018-03-31 17:08:25
Original
1696 people have browsed it

This time I will show you how to use Ajax to dynamically load data. What are theprecautions for Ajax to dynamically load data? The following is a practical case, let's take a look.

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.

ControllerActionResult code (used to display the page)

///  /// 电话查询页面 ///  ///  public ActionResult PhoneSearch(string sql) { phoneList=从数据库查询数据; ViewBag.phoneList = phoneList; return View(); }
Copy after login
2. Main front page Code

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

 @if (ViewBag.phoneList != null) { foreach (var item in ViewBag.phoneList) { number = number + 1;  } } 
序号 公司 部门 小组 姓名 职位 电话
@number @item.Conpany @item.Department @item.Team @item.Name @item.Position @item.PhoneNumber
Copy after login
3. My query conditions

公司: 部门: 小组:

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

4.1 Front desk

JavaScriptcode

//打开页面的时候执行 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($('')); //2.将返回值动态加载进下拉框,动态生成标签。 for (i = 0; i < data.length;i++) { $("#company").append($('')); } }, error: function (XMLHttpRequest, textStatus, errorThown) { alert("操作失败!"); } }) }
Copy after login
4.2 Initialize the ActionResult code corresponding to the drop-down box

///  /// 获取电话查询公司下拉数据 ///  ///  [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 ($('#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 "" + "" +number + "" + element.Conpany + "" + element.Department + "" + element.Team + "" + element.Name + "" + element.Position + "" + element.PhoneNumber + ""; }) }) }, error: function (XMLHttpRequest, textStatus, errorThown) { alert("操作失败!"); } }) }
Copy after login
5.1 ActionResult corresponding to the query data

///  /// 电话查询 ///  ///  [HttpPost] public JsonResult PhoneSearchSubmit(string company, string dept, string group) { phoneList = 根据条件查询数据; return Json(phoneList); }
Copy after login
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to handle errors when returning json data to ajax in spring mvc

How to upload files with Ajax Progress bar Codular

The above is the detailed content of How to use Ajax to dynamically load data. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!