`

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开发购物网站

    7. **动态加载和异步更新**:JqueryMobile支持通过AJAX动态加载页面内容,这在处理商品详情或评论时尤其有用。使用`$.mobile.changePage()`函数可以实现页面无刷新切换,保持用户体验的连贯性。 8. **事件处理**:...

    jQuery mobile 开发案例

    5. **自定义组件**:如果有的话,学习如何扩展 jQuery Mobile,为项目创建自定义组件。 通过研究这个案例,无论是初学者还是有经验的开发者,都能更深入地理解和掌握 jQuery Mobile 的工作原理和使用技巧,从而提升...

    JQueryMobile UI 汇总

    1. **单一页面架构**:jQuery Mobile 使用单一页面模板,将多个页面的内容包含在一个 HTML 文件中,通过 AJAX 技术实现页面间的平滑切换,提高用户体验。 2. **触控优化**:所有的 UI 元素都经过优化,以适应触摸...

    jQuery Mobile快速入门源代码

    jQuery Mobile 是一个轻量级、触控优化的前端框架,专为移动设备设计,用于创建跨平台、响应式的Web应用程序。这个压缩包包含了《jQuery Mobile快速入门》这本书的配套源代码,适合初学者深入理解jQuery Mobile的...

    jquery mobile 应用实例

    jQuery Mobile 是一个强大的、轻量级的框架,专为移动设备上的网页应用设计,提供了丰富的用户界面(UI)组件和交互效果。它基于 jQuery 核心库,使得开发者能够轻松创建具有触摸优化界面的跨平台 Web 应用程序。在...

    JQuery Mobile需要的包

    jQuery Mobile 是一个流行的前端框架,专为移动设备设计,用于构建响应式、触控友好的网页应用。这个框架基于 jQuery 库,提供了丰富的组件和交互效果,使得开发者能够快速地创建功能丰富的移动Web应用。 ### 1. ...

    jquery mobile 餐厅实例

    3. **增强型链接:** 通过设置`data-ajax="true"`,jQuery Mobile 可以实现页面无刷新跳转,提供更流畅的用户体验。 4. **触控事件:** 支持触摸事件,如`tap`、`swipe`等,使得在移动设备上的交互更为自然。 **二...

    jQuery mobile带历史记录的仿谷歌搜索

    在这个主题“jQuery mobile带历史记录的仿谷歌搜索”中,我们将深入探讨如何使用jQuery Mobile创建一个具有类似谷歌搜索功能的页面,同时利用其内置的历史管理功能,实现用户浏览历史的记录和回溯。 首先,jQuery ...

    jquery mobile案例

    在这个案例中,我们将深入探讨如何利用 jQuery Mobile 实现图片查看器和游戏功能。 一、jQuery Mobile 基础 在开始案例之前,我们先了解一下 jQuery Mobile 的基础。这个框架的核心在于其数据属性(data-...

    jQuery Mobile实例

    jQuery Mobile 可以与其他库(如 jQuery UI)、框架(如 AngularJS 或 Vue.js)结合使用,以实现更复杂的功能和交互。但要注意,过多的库可能会导致性能下降,因此需要谨慎选择和整合。 **9. 性能优化** 由于 ...

    jquery mobile web api开发例子

    本教程将深入探讨如何利用jQuery Mobile与C#实现的Web API2接口进行交互,展示列表数据。 **jQuery Mobile 简介** jQuery Mobile 是一个轻量级、触控优化的前端框架,专门用于构建移动设备上的响应式网站和应用程序...

    JQuery Mobile教程

    ### JQuery Mobile 教程知识点详解 #### 一、概述 JQuery Mobile 是一款基于 jQuery 的开源框架,专门用于创建响应式、触摸优化的 Web 应用程序。它提供了丰富的 UI 组件以及基于 AJAX 的导航系统,能够实现平滑的...

    Jquery mobile实现简单的购物平台源码.rar

    3. 购物车:使用Jquery Mobile的button和input组件创建“加入购物车”按钮,配合Ajax实现商品添加、删除和数量修改,购物车状态实时更新。 4. 结算与支付:在购物车页面提供结算按钮,跳转到订单确认页面,展示总价...

    JqueryMobile基础,初学者

    在 jQuery Mobile 中,如果动态添加内容,需要使用 `refresh` 方法更新组件样式: ```javascript // 添加新列表项后刷新列表视图 $("#myListview").append("&lt;li&gt;&lt;a href='#'&gt;新列表项&lt;/a&gt;&lt;/li&gt;").listview("refresh...

    jquery mobile web api 带下拉,上拉滑动分页滚动示例

    页面间的导航可以通过链接和表单实现,这些链接和表单被jQuery Mobile自动增强,以提供平滑的过渡效果。 在创建滑动分页时,我们可以利用jQuery Mobile的`data-inset="true"`属性来创建一个内嵌的列表视图,这使得...

    jQuery Mobile权威指南源码

    jQuery Mobile 默认使用Ajax技术来实现页面间的导航,以提供无缝的浏览体验。然而,这可能会对SEO和书签功能造成影响。因此,在某些场景下,可以禁用Ajax导航或使用 `data-ajax="false"` 属性来恢复传统的HTTP跳转。...

    Jquery Mobile 类库

    jQuery Mobile 是一个专为触摸设备设计的前端框架,它基于 jQuery,主要用于构建响应式和移动优化的网页应用。这个库旨在提供一套完整的组件和交互模式,使得开发者能够轻松创建功能丰富的跨平台移动应用程序。在本...

    jQuery.Mobile的文档以及Demo

    通过自动添加 CSS 类和数据属性,jQuery Mobile 可以将普通链接转换为平滑的触控过渡效果,提供类似原生应用的导航体验。 3. **自动页面格式化(Auto-Enhancement)** 当页面被加载时,jQuery Mobile 会自动识别...

    jquery mobile快速入门

    - **定义**:jQuery Mobile 是一款流行的开源 JavaScript 库,专为移动设备优化设计,能够帮助开发者快速创建响应式网站和应用程序。 - **目标**:jQuery Mobile 的主要目标是为移动Web开发提供一个统一的框架,支持...

    jquerymobile 入门资料

    - 对于链接,jQuery Mobile 会自动处理AJAX导航,只需设置`rel="external"`或`data-ajax="false"`来阻止默认行为。 - 表单也得到了增强,包括自动的验证提示和更友好的提交体验。 ## 二、jQuery Mobile 的基础...

Global site tag (gtag.js) - Google Analytics