struts2+jquery+json结合【原创】
Ywy-zhao 2012-12-13
Struts2+Jquery+Json 结合
最近项目组中的同事说,老赵,你写的 ajax 返回 json 的方法看不懂,呵呵,也许吧,那是以前的方 式,现在 Jquery 横行天下,人都的要进步,好吧,也许我是老了,但是生活的继续,的吃饭啊,那么 今天写一个基于 Jquery 的方式返回 Json 的,记录
一下我的程序员之路,废话不多说,开弄。 做好准备首先需要 Jquery 去官网 下载
下载后 Jquery 文件
准备 struts2 的 jar 包 去官方网站 #struts237 呵呵 后 来 才发 现,apache 真的 很牛 B, 很多开 源的 东西都是 他们 的 , 网站 上现在 最近 的版 本是 Struts2.3.7.不下这个也不行了,它以前的版本不在提供了,你也可以去网上找别的版本。
Ywy-zhao 2012-12-13
将下载后的 struts-2.3.7-lib.zip 包进行解压,得到以下文件
打开 lib 文件夹,里面有很多 jar 包,我们做这个不需要这么多 jar 包,如果你为了省事,可以全部 利用,我们找出我们需要的 jar 包,以下的 jar 包就是我们需要的,到时候实现什么功能在向工 程添加吧。
Ywy-zhao 2012-12-13
说明一下下图的三个 jar 包是必须的。
OK,准备工作都做好了,开始弄吧。建立一个 Web 工程,为了方便我使用的是 MyEcliose8.5, 说句题外话,其实 MyEclipse 挺好用的,但是随着它的版本不断的升级,占用机器的内存越来越 多,加上公司的电脑,哎,不废话了哈,建立 Web 工程就不用说了吧,不会的话,自己 google 或者 baidu.
建立好的工程
工程的名字好像恶心点了,就那样吧,我们要的是结果,外形可以忽略#28。 进行组装,首先加入 Jquery 支持.
把刚才选出来的 jar 包,放入工程 WebRoot/WEB-INF/lib 下面,你懂的。
Ywy-zhao 2012-12-13
到此为止,需要的支持都加入了,继续,在 src 下建立一个 struts.xml,你懂的,现在的工程结构
Ywy-zhao 2012-12-13
进行构造,既然你现在用的 struts2,配置一下 web.xml 吧,很简单,加入 struts2 的支持就可以了。
Ywy-zhao 2012-12-13
现在写一个 Demo 创建一个 MusicAction 如下图所示
Ywy-zhao 2012-12-13
我们首先要实现的是 JSON 返回一个简单的字符串。 在 MusicAtion 添加方法
在 struts2.xml 配置返回单个值
Ywy-zhao 2012-12-13
在前台 scripts 下创建一个 json.js
Jsp 页面部分代码
点击获取单个值按钮效果如下
Ywy-zhao 2012-12-13
页面输出的红色字信息为后台 returnMessage()方法中的信息。 继续,获取一个 Music 对象,mMusicAction 中代码如下
对应的 struts.xml 文件信息
对应的 Jquery 脚本
点击获取 Music 对象按钮页面效果
Ywy-zhao 2012-12-13
注:这里的 data.music 指的是 MusicAction 中的 music 对象,不是 return 的值也不是 struts.xml 中配置的。 继续,获取音乐集合,MusicAction 代码如下
对应的 struts2 文件信息
对应的 Jquery 代码
Ywy-zhao 2012-12-13
点击获取 List 对象按钮
下面一个是 JSON 获取 Map 对象,MusicAction 代码
对应的 struts.xml 配置
Ywy-zhao 2012-12-13
对应的 Jquery 代码
对应的页面效果
Ywy-zhao 2012-12-13
好了到此为止,JSON 返回简单的字符串、一个对象、对象的集合、Map 都实现了。 上面的都是基于 Jquery 的 getJSON()方式下面的小列子是基于 Jquery 的 ajax 的表达式提交数 据。 MusicAction 中的代码
struts.xml 中的配置
Jquery 部分代码
Ywy-zhao 2012-12-13
点击提交信息按钮
好了到这里,JSON 获取数据也好,Ajax 也罢,都测试完了。