微软MVC3框架下JqueryMobile Ajax的实现(以更新ListView为例)
2012-04-10 19:05
302 查看
一、 提供后台数据的接口
后台主要提供Json序列化后的数据。任何一个对象都可以序列化为Json字符串。在后台将对象序列化后字符串可以直接提交给前台反序列化成对象。
1、提供JSON的接口:
2、在MVC的Control层调用 1 中函数,返回JSON结果字符串:
二、 前台Js和jquery的异步请求数据和Dom编程
1、前台的HTML代码:
2、Jquery 异步请求数据,Dom更新
主要实现的过程:
1)异步请求数据,返回了data数据;
2)将返回后的数据反序列化成listUrl对象;
3)将listUrl对象的数据添加到id为EmrGallery的listview中;
4)重新渲染ListView。这是一个很重要而往往比较容易漏掉的步骤,少了这一步,JqueryMobile更新后的样式不能正确渲染。
其实总的来说也不是很复杂。就是前台用jquery异步请求后台Control中经过JSON序列化后的字符串数据,请求成功数据后,把JSON字符反序列化为JS的对象,然后在HTML中展示出来即可、
后台主要提供Json序列化后的数据。任何一个对象都可以序列化为Json字符串。在后台将对象序列化后字符串可以直接提交给前台反序列化成对象。
1、提供JSON的接口:
/// <summary> /// 根据时间取得短医嘱 /// </summary> /// <param name="date"></param> /// <returns>返回经过JSON序列化后的字符串</returns> private string GetShortAdviseByDay(string date) { List<DocAdvise> docAdvise = pDao.getDocAdviseByDate((List<DocAdvise>)Session["shortAd"], date, bDay); //根据日期筛选医嘱记录 JavaScriptSerializer jss = new JavaScriptSerializer(); //新建序列化对象 string result = jss.Serialize(docAdvise); //将要返回的对象序列化为JSON字符串 return result; }
2、在MVC的Control层调用 1 中函数,返回JSON结果字符串:
/// <summary> /// 异步请求短医嘱 /// </summary> /// <param name="date"></param> /// <returns></returns> public ActionResult ResponseShortAdvise(string date) { return Content(GetShortAdviseByDay( date)); }
二、 前台Js和jquery的异步请求数据和Dom编程
1、前台的HTML代码:
<ul id="emrListView" data-role="listview" data-inset="true" style="margin-top: 0px;"> <li><a href="#"><img src="#" alt="病例内容1" /></a></li> <li><a href="#"><img src="#" alt="病例内容2" /></a></li> </ul>
2、Jquery 异步请求数据,Dom更新
主要实现的过程:
1)异步请求数据,返回了data数据;
2)将返回后的数据反序列化成listUrl对象;
3)将listUrl对象的数据添加到id为EmrGallery的listview中;
4)重新渲染ListView。这是一个很重要而往往比较容易漏掉的步骤,少了这一步,JqueryMobile更新后的样式不能正确渲染。
function ReflashEMR(time) { //异步请求数据。其中ResponseShortAdvise为Control里面的函数;time为传入的参数;data为返回的JSON数据 $.post("../YdylAjax/ResponseShortAdvise", { "date": time }, function (data, status) { var listUrl = $.parseJSON(data); if (status == "success") { var objListView = document.getElementById("emrListView"); objListView.innerHTML = ""; //清空ListView原本的内容 //如果服务器返回记录为空 if (listUrl.length == 0) { $("#EmrGallery").append('<h4>提示:当前日期没有数据</h4>'); return; } var tempnum = 1; for (var i = listUrl.length - 1; i >= 0; i--) { $("#emrListView").append(' <li><a href="#" data-transition="fade"><img src="http://www.cnblogs.com/Content/imges/DutyRoster.png" class="ui-li-icon"> <h3 >病历 ' + tempnum + ' </h3><p > 医生:' + listUrl[i].Doc + ' </p><p> ' + listUrl[i].Dep + listUrl[i].Time + ' </p></a></li>'); //将ListView中新的li tempnum++; } } $("#emrListView").listview("refresh"); //这里是重新渲染JqueryMobile中ListView的样式 }); }
其实总的来说也不是很复杂。就是前台用jquery异步请求后台Control中经过JSON序列化后的字符串数据,请求成功数据后,把JSON字符反序列化为JS的对象,然后在HTML中展示出来即可、
相关文章推荐
- JQuery+Ajax+Struts2+Hibernate框架整合实现完整的登录注册
- Ajax实现下拉框级联(在servlet中把从数据库取出来的值以json形式返回ajax,用jquery遍历便利更新<option>的值)
- 使用Python的Django框架结合jQuery实现AJAX购物车页面
- 使用Python的Django框架结合jQuery实现AJAX购物车页面
- Django+Ajax+jQuery实现网页动态更新
- Django+Ajax+jQuery实现网页动态更新的实例
- 使用 jQuery+Ajax+MySQL+Servlet 实现不刷新页面数据更新
- jquery+ajaxform+springboot控件实现数据更新功能
- EF 4.1+MVC3+Jquery Ajax+Json.Net+JqueryUI+IUnitOfWork+Repository 学习DEMO(暂停更新)
- 使用Python的Django框架结合jQuery实现AJAX购物车页面
- yii框架下jquery在ajax更新后失效问题
- DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.
- 使用Jquery的Ajax实现无刷新更新,修改,删除页面
- 关于jQuery在Asp.Net Mvc 框架下Ajax文件上传的实现
- 不用jquery等框架实现ajax无刷新登录
- 关于jQuery在Asp.Net Mvc 框架下Ajax文件上传的实现
- jquery使用ajax实现页面局部更新
- 使用Jquery的Ajax实现无刷新更新,修改,删除页面
- 使用Jquery的Ajax实现无刷新更新,修改,删除页面
- 使用Jquery的Ajax实现无刷新更新,修改,删除页面