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(); }
序号 | 公司 | 部门 | 小组 | 姓名 | 职位 | 电话 |
---|---|---|---|---|---|---|
@number | @item.Conpany | @item.Department | @item.Team | @item.Name | @item.Position | @item.PhoneNumber |
公司: 部门: 小组:
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("操作失败!"); } }) }
////// 获取电话查询公司下拉数据 /// ///[HttpPost] public JsonResult GetCompantListForPhone() { compantList = 从数据库获取这个下拉框数据的集合; return Json(compantList); }
//根据条件查询电话 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 "" + " "; }) }) }, error: function (XMLHttpRequest, textStatus, errorThown) { alert("操作失败!"); } }) }" +number + " " + element.Conpany + " " + element.Department + " " + element.Team + " " + element.Name + " " + element.Position + " " + element.PhoneNumber + "
////// 电话查询 /// ///[HttpPost] public JsonResult PhoneSearchSubmit(string company, string dept, string group) { phoneList = 根据条件查询数据; return Json(phoneList); }
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!