json实现页面局部刷新


第一步,导入需要的JAR包
//struts2-json-plugin-2.1.8.jar
//json-lib-2.1.jar
//jquery-1[1].3.2.min.js


/*
*实体类
*/
public class Goods implements java.io.Serializable {

private Integer id;
private String goodName;
private Integer goodType;
}
//DAO
public 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;
}
}
//ACTION
public 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[i].goodName,data.secondList[i].id));
alert(data.secondList[i].id);
}
}


上面实现的逻辑是,当第一次加载页面时把一级分类读取出来,此时二级分类为空。当用户点某个一级分类时根据此一级分类ID读取出数据库中该分类下的二级分类………………当然用的是局部刷新。呵呵
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值