Struts2+jQuery+ajax+json示范
Struts2+jQuery+ajax+json示例
struts2+jquery+json+ajax的应用,先记下了,以后备用。
1.环境
jquery:jquery-1.6.2.min.js
struts2:基本包就不说了,就说说应用json的包,主要有struts2-json-plugin-2.2.1.1.jar
json:json的包主要是json-lib-2.4-jdk15.jar,此外还有几个依懒包,这些包和struts2的包很多都重复,引入时需要注意
commons-beanutils-1.8.3.jar,
commons-collections-3.2.1.jar,
commons-logging-1.1.1.jar,
commons-logging-1.1.1.jar,
ezmorph-1.0.6.jar
2 示例
在这里,以一个动态生成的下拉框为例。
2.1 Action:主要的代码
2.2 getAllCategoryName()的主要代码:
toolCategoryDao就是spring的hibernateTemplate进行CRUD的简单封装。
2.3 struts.xml
需要注意的是,当返回的数据是json的时候,你的action的package要继承json-default。这个是东东在struts2-json-plugin-2.2.1.1.jar里面。
2.3 下面可以来看看前端JSP和jQuery了
2.3.1JSP很简单
2.3.2jquery
3.运行效果
见附件
struts2+jquery+json+ajax的应用,先记下了,以后备用。
1.环境
jquery:jquery-1.6.2.min.js
struts2:基本包就不说了,就说说应用json的包,主要有struts2-json-plugin-2.2.1.1.jar
json:json的包主要是json-lib-2.4-jdk15.jar,此外还有几个依懒包,这些包和struts2的包很多都重复,引入时需要注意
commons-beanutils-1.8.3.jar,
commons-collections-3.2.1.jar,
commons-logging-1.1.1.jar,
commons-logging-1.1.1.jar,
ezmorph-1.0.6.jar
2 示例
在这里,以一个动态生成的下拉框为例。
2.1 Action:主要的代码
private String jsonResult; public String ajaxAllNames(){ jsonResult = categoryManager.getAllCategoryName(); return SUCCESS; }
2.2 getAllCategoryName()的主要代码:
public String getAllCategoryName(){ List<String> names = toolCategoryDao.getAllNames("select name From ToolCategory t"); return JSONArray.fromObject(names).toString(); }
toolCategoryDao就是spring的hibernateTemplate进行CRUD的简单封装。
2.3 struts.xml
<package name="ajax" namespace="/" [color=red]extends="json-default">[/color] <action name="ajaxCategoryName" class="com.wildrain.stm.action.ToolCategoryAction" method="ajaxAllNames"> <result type="json"> <param name="root">jsonResult</param> </result> </action> </package>
需要注意的是,当返回的数据是json的时候,你的action的package要继承json-default。这个是东东在struts2-json-plugin-2.2.1.1.jar里面。
2.3 下面可以来看看前端JSP和jQuery了
2.3.1JSP很简单
测试:<select id="se"></select>
2.3.2jquery
$( function() { var url = 'ajaxCategoryName.action'; //使用$.post方式 $.post( url, //服务器要接受的url dealData, 'json' //数据传递的类型 json }); tion dealData(data){ alert(data); var tool = eval("("+data+")"); hasDataToDeal2(tool); } function hasDataToDeal2(data){ var se = $("#se"); $.each(data, function() { var opt = "<option value="+this+" >"+this+"</option>"; se.append(opt); //alert(this); }); }
3.运行效果
见附件