Unity 在MVC上的应用(扩展篇:JQuery AJAX)

======================================================
注：本文源代码点此下载
======================================================

系列目录

unity 在mvc上的应用(上:思路整理)

unity 在mvc上的应用(中:repository)

unity 在mvc上的应用(下:orm)

unity 在mvc上的应用(扩展篇:jquery ajax)

unity 在mvc上的应用(扩展篇:事务控制-前篇actionfilter)

unity 在mvc上的应用(扩展篇:事务控制-后篇unit of work)

unity 在mvc上的应用(扩展篇:日志管理nlog)

正题

回顾上几篇,我说过会在今后的扩展篇系列加入一些常用的技术,所以今天就说说在asp.net mvc上的jquery ajax应用。

先来简单描叙一下两个用到的东西:

1.jquery

jquery由美国人john resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的jörn zaefferer,罗马尼亚的stefan petre等等。jquery是继prototype之后又一个优秀的javascrīpt框架。其宗旨是——write less,do more,写更少的代码,做更多的事情。

2.ajax

ajax即“asynchronous javascript and xml”(异步javascript和xml),ajax并非缩写词,而是由jesse james gaiiett创造的名词,是指一种创建交互式网页应用的网页开发技术。

好了废话少说,直至进入我们今日的主题。xd

在教你如何使用jquery ajax用法之前我们来引入2个在web开发方面常见问题。

(1)如果你有用过asp.net mvc,你应该会知道,我们在页面提交数据到controller的时候,是基于post方式的,而数据的载体是表单,也就是说数据要通过post方式提交都是在表单里面的,而且每次提交数据都要刷新当前页面,如果想当前页面某一区域(div,table等)的数据保留起来,或者是说某个输入框的数据保留起来不清空这应该怎么办?很明显整个页面的刷新没可能再保留页面的数据了,在这种前提下,我们一般的做法是,把要还原的数据先post去后台装载,然后再从后台传组装到要返回的数据里面再返回到新页面读取,听上这种做法挺别扭的,你别笑,以前还不会ajax的时候,也只能这样解决这种问题,相信很多人都试过或者还在用这种方式。

(2)第二个问题是,当你存在一个很巨大的表单的时候,后台只需要很小量的数据来计算,记录什么的,例如一个超巨大的表单,里面有1000个输入框,而后台只需要其中一个输入框的数据,而传统的post,要先提交整个表单,然后再去调用服务计算什么的,你看看,这样是不是很浪费带宽?只要你极限化看待这个问题,这种做法其实也是很别扭的,我们的口号,要什么拿什么!!

为了解决这两个个问题,我们要使用ajax技术。也就是我们今日的主题jquery ajax!!终于入住题了~(*^__^*) 嘻嘻……

一如既往,从我们上篇已有的demo入手.先看看我们的页面,这次先从一个简单的用户登录功能入手教你用jquery ajax。

先看看传统的post方式实现登录功能的代码

可以看出,我们一般都是这样去实现的。

为了实现ajax提交,我们再写一个新的action。

功能实现上没什么区别,要注意的是,这里我们发送回去的是一个跳转路径,因为我们要在脚本里跳转。其次要注意的是,也是基于http post的。。xd

现在开始写我们的脚本了。

代码是写在我们的登录页面的脚本上的,要注意的是,这里的dto和后台的静态dto对象是对应的,字段要一致,不然是无法反序列化成功的,而mvc3.0自动实现了对对应的静态类的反序列化,很方便!而这里引入序列化/反序列化 概念是因为,我们用ajax传输的数据是以json形式的,json数据要在网络传输首先要进行序列化,在接收端反序列化才可以成功读取数据,你可以看成是封包和解包过程,这里的出json.stringify(dto)是用来实现对json数据序列化的,而javascript本身里没有对数据序列化的功能的,所以我们要先引入一个外部脚本库来满足这个需求,看下图。

而这个对json序列化的脚本库可以到这里下载: www.json.org

具体实现代码我们就完成了,很简单,现在我们来对比一下效果。

首先看看传统的post方式。

我们按submit按钮~

再看看我们的jquery ajax方式如何~xd

结果

想必结果都不用我多说了~

本篇结语

希望对你们学习mvc有所帮助。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/