AJAX嵌套获取数据的IDEA
2016-07-08 12:10
519 查看
需求
假设有一个医院病人列表,每个病人有一个体检数据列表,每个体检数据表中都有相应的体检数据。现在需要我们在病人列表中显示体检列表里第一条的体检数据中的警报级别。这么说有点乱, AList -> BList -> CTable->获取CTable中的warnData->显示到AList的每一个数据中。
分析
遇到了这个问题我第一时间感觉像是后端来处理的,但是没办法后端不处理我只好自己来一步步进去拿咯。这里遇到的问题是:由于AJAX是异步的,使用for循环来搞经常会拿不到数据或者出错。所以我用了以下代码。代码逻辑
MonitorEstimateList = [] index = 0 PatientListData = null function loadInt() { //获取所有病人信息 $.ajax("api", { type: 'get', contentType: 'application/json', dataType: "json", success: function (result, status, xhr) { var json = eval('(' + result + ')'); PatientListData = json; loadEatimateList(); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); }, }) } function loadEatimateList() { var message = eval('(' + PatientListData.Message + ')'); $.ajax(kfsys.baseUrl + "api?HospitalizedHisID=" + message[index].HospitalizedHisID, { type: 'get', contentType: 'application/json', dataType: "json", success: function (result, status, xhr) { var resultObj = eval('(' + result + ')'); //从webApi获取json字符串转换成JSON对象 if (resultObj.length > 0) { if (resultObj[0].AdmissionID != null) { var url = kfsys.baseUrl + "api"; $.ajax(url, { type: "get", data: {AdmissionID: resultObj[0].AdmissionID}, contentType: 'application/json', dataType: "json", success: function (result, status, xhr) { var json = eval('(' + result + ')'); //从webApi获取json字符串转换成JSON对象 MonitorEstimateList.push(json.warnData); index++; if (index + 1 > message.length) { //TODO 输出结果 } else { loadEatimateList(); } }, error: function (XMLHttpRequest, textStatus, errorThrown) { MonitorEstimateList.push(0) index++; if (index + 1 > message.length) { //TODO 输出结果 } else { loadEatimateList(); } } }) } else { MonitorEstimateList.push(0); index++; if (index + 1 > message.length) { //TODO 输出结果 } else { loadEatimateList(); } } } else { MonitorEstimateList.push(0); index++; if (index + 1 > message.length) { //TODO 输出结果 } else { loadEatimateList(); } } }, error: function (XMLHttpRequest, textStatus, errorThrown) { MonitorEstimateList.push(0); index++; } }) }
实现步骤
创建index进行计数;PatientListData用于存储第一层对象数据;MonitorEstimateList用于存储每个病人的警报级别数据。AJAX查询到病人信息数组,查询成功后将对象数据存储到PatientListData中,并进行下一层的查询。
通过PatientListData数组中每条数据的住院号来AJAX查询当前病人的体检列表。根据不同的情况添加数据到MonitorEstimateList中,并使index加一。最后判断index索引是否超过了PatientListData,没有超过则重新启用loadEatimateList方法。
如果体检表查询成功,并且有数据。那么获取第一条体检列表数据的查询ID,通过查询ID查询到体检列表详情,最后将警报级别数据存入到MonitorEstimateList中。
一直循环执行loadEatimateList方法直到index + 1大于MonitorEstimateList的长度。这样就获取到了所有病人的警报级别数据。
最后再部署到HTML的时候直接用MonitorEstimateList的数据就可以了。
总结
虽然这个方法是可行的,但是我总是觉得并不是一个最佳解决方案。相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 我是运营,我没有假期
- 最后一次说说闭包
- Ajax
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- 使用Ajax实现异步用户名验证
- 使用ajax实现用户登录验证(升级版)
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)