JqueryMobile Ajax的实现（以更新ListView为例）

一、提供后台数据的接口

后台主要提供Json序列化后的数据。任何一个对象都可以序列化为Json字符串。在后台将对象序列化后字符串可以直接提交给前台反序列化成对象。

1、提供JSON的接口：

1         /// <summary>
 2         /// 根据时间取得短医嘱
 3         /// </summary>
 4         /// <param name="date"></param>
 5         /// <returns>返回经过JSON序列化后的字符串</returns>
 6         private string GetShortAdviseByDay(string date)
 7         {
 8             List<DocAdvise> docAdvise = pDao.getDocAdviseByDate((List<DocAdvise>)Session["shortAd"], date, bDay);  //根据日期筛选医嘱记录
 9             JavaScriptSerializer jss = new JavaScriptSerializer();    //新建序列化对象
10             string result = jss.Serialize(docAdvise);    //将要返回的对象序列化为JSON字符串
11             return result;
12 
13         }

2、在MVC的Control层调用 1 中函数，返回JSON结果字符串：

1         /// <summary>
 2         /// 异步请求短医嘱
 3         /// </summary>
 4         /// <param name="date"></param>
 5         /// <returns></returns>
 6         public ActionResult ResponseShortAdvise(string date)
 7         {
 8             return Content(GetShortAdviseByDay( date));
 9 
10         }

二、前台Js和jquery的异步请求数据和Dom编程

1、前台的HTML代码：

1                   <ul id="emrListView" data-role="listview" data-inset="true" style="margin-top: 0px;">
2                    <li><a href="#"><img  src="#" alt="病例内容1" /></a></li>
3                    <li><a href="#"><img  src="#" alt="病例内容2" /></a></li> 
4                   </ul>

2、Jquery 异步请求数据，Dom更新

主要实现的过程：

1)异步请求数据，返回了data数据；

2）将返回后的数据反序列化成listUrl对象；

3）将listUrl对象的数据添加到id为EmrGallery的listview中；

4）重新渲染ListView。这是一个很重要而往往比较容易漏掉的步骤，少了这一步，JqueryMobile更新后的样式不能正确渲染。

1 function ReflashEMR(time) {
 2     //异步请求数据。其中ResponseShortAdvise为Control里面的函数；time为传入的参数；data为返回的JSON数据
 3     $.post("../YdylAjax/ResponseShortAdvise", { "date": time }, function (data, status) {
 4         var listUrl = $.parseJSON(data);
 5         if (status == "success") {
 6             var objListView = document.getElementById("emrListView");
 7             objListView.innerHTML = "";    //清空ListView原本的内容
 8             //如果服务器返回记录为空
 9             if (listUrl.length == 0) {
10                 $("#EmrGallery").append('<h4>提示：当前日期没有数据</h4>');
11                 return;
12             }
13             var tempnum = 1;
14             for (var i = listUrl.length - 1; i >= 0; i--) {
15                 $("#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
16                 tempnum++;
17             }
18         }
19         $("#emrListView").listview("refresh");  //这里是重新渲染JqueryMobile中ListView的样式
20     });
21 
22 }

其实总的来说也不是很复杂。就是前台用jquery异步请求后台Control中经过JSON序列化后的字符串数据，请求成功数据后，把JSON字符反序列化为JS的对象，然后在HTML中展示出来即可。

转自：http://www.cnblogs.com/still-windows7/archive/2012/04/10/2441098.html

JqueryMobile Ajax的实现（以更新ListView为例）

相关推荐