json实现页面局部刷新
第一步,导入需要的JAR包//struts2-json-plugin-2.1.8.jar//json-lib-2.1.jar//jquery-1.3.2.min.js/* *实体类 */public class Goods implements java.io.Serializable {private Integer id;private String goodName;private Integer goodType;}//DAOpublic class GoodDao {public List<Goods> loadFirst(){Configuration conf=new Configuration().configure();SessionFactory sf=conf.buildSessionFactory();Session session=sf.openSession();List<Goods> goodsList=session.createCriteria(Goods.class).add(Restrictions.eq("goodType", 0)).list();session.close();return goodsList;}public List<Goods>loadSecond(Integer id){Configuration conf=new Configuration().configure();SessionFactory sf=conf.buildSessionFactory();Session session=sf.openSession();List<Goods>goodsList=session.createCriteria(Goods.class).add(Restrictions.eq("goodType", id)).list();session.close();return goodsList;}}//ACTIONpublic class GoodAction extends ActionSupport {private GoodDao goodDao=new GoodDao();private List<Goods>firstList=new ArrayList();private List<Goods>secondList=new ArrayList();private Goods good;private Integer id;//一级分类ID // 加载一级分类 public String loadBlock(){ firstList=goodDao.loadFirst(); return "loadFirst"; } //根据所选一级分类来加载二级分类 public String searchSecond(){ secondList=goodDao.loadSecond(id); return "success"; }}
//STRUTS.xml配置<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN" "http://struts.apache.org/dtds/struts-2.1.7.dtd"><struts> <package name="default" extends="json-default">//继承json-default <action name="goodAction" class="action.GoodAction"> <result name="loadFirst">/goods.jsp</result> <result type="json" ></result>//定义成json类型的 </action> </package></struts>//在struts2-json-plugin-2.1.8.jar的JsonPlugin.tld中定义了如下包(已经定义过了):<struts> <package name="json-default" extends="struts-default"> <result-types> <result-type name="json" class="org.apache.struts2.json.JSONResult"/> </result-types> <interceptors> <interceptor name="json" class="org.apache.struts2.json.JSONInterceptor"/> </interceptors> </package></struts>
//页面<s:form action="" theme="simple"> <s:label value="一级分类:"/> <s:select list="firstList" listKey="id" listValue="goodName"headerKey="-1" headerValue="请选择" id="firstBlock" cssClass="select"></s:select> <br/> <s:label value="二级分类:" /> <s:select list="secondList" listKey="id" listValue="goodName" headerKey="-1" id="secondBlock" headerValue="请选择" cssClass="select"></s:select> </s:form>//JS<script type="text/javascript" language="javascript"> $(function(){ $("#firstBlock").change(function(){ $.ajax({url:"goodAction!searchSecond",type:"post",dataType:"json",data:{"id":$("#firstBlock").val()},error:function (XMLHttpRequest, textStatus, errorThrown) {alert(XMLHttpRequest.responseText);},success:showContent}); }); }); function showContent(data){ document.getElementById('secondBlock').options.length=1; for(var i=0;i<data.secondList.length;i++){ document.getElementById('secondBlock').options.add(new Option(data.secondList.goodName,data.secondList.id)); alert(data.secondList.id); } }
上面实现的逻辑是,当第一次加载页面时把一级分类读取出来,此时二级分类为空。当用户点某个一级分类时根据此一级分类ID读取出数据库中该分类下的二级分类………………当然用的是局部刷新。呵呵
页:
[1]