1. 程式人生 > >struts2 使用json與extjs進行資料互動

struts2 使用json與extjs進行資料互動

在預設時,<result>標籤的type屬性值是“dispatcher”(實際上就是轉發,forward)。開發人員可以根據自己的需要指定不同的型別,如redirect、stream等。如下面程式碼所示:

<result name="save" type="redirect">

/result.jsp

</result>

複習轉發與重定向的區別:重定向和轉發有一個重要的不同:當使用轉發時,JSP容器將使用一個內部的方法來呼叫目標頁面,新的頁面繼續處理同一個請求,而瀏覽器將不會知道這個過程。 與之相反,重定向方式的含義是第一個頁面通知瀏覽器傳送一個新的頁面請求。因為,當你使用重定向時,瀏覽器中所顯示的URL會變成新頁面的URL, 而當使用轉發時,該URL會保持不變。重定向的速度比轉發慢,因為瀏覽器還得發出一個新的請求。同時,由於重定向方式產生了一個新的請求,所以經過一次重定向後,request內的物件將無法使用。 怎麼選擇是重定向還是轉發呢?通常情況下轉發更快,而且能保持request內的物件,所以他是第一選擇。但是由於在轉發之後,瀏覽器中URL仍然指向開始頁面,此時如果過載當前頁面,開始頁面將會被重新呼叫。如果你不想看到這樣的情況,則選擇轉發。 轉發和重定向的區別 不要僅僅為了把變數傳到下一個頁面而使用session作用域,那會無故增大變數的作用域,轉發也許可以幫助你解決這個問題。重定向:以前的request中存放的變數全部失效,並進入一個新的request作用域。轉發:以前的request中存放的變數不會失效,就像把兩個頁面拼到了一起。

而若要在struts2 中使用json,首先要匯入

json-lib-2.1.jar

struts2-json-plugin-2.1.8.jar

struts2-junit-plugin-2.1.8.jar

然後

<package name="struts2" extends="json-default">
<action name="getJson" class="com.holley.action.GetJson">
<result name="success" type="json"/>
</action>
</package>

沒有jsp跳轉頁面。注意此時extends="json-default",not extends="struts-default"

struts會將action中所有的field轉化為json資料,如:action類中有一個private PageBean p,而PageBean類中有private int totalProperty;private List root;當然所有的field都要設定getter與setter;而在extjs程式碼中如果我要獲取json資料 totalProperty和 root,書寫如下:p.totalProperty,p.root;

以下是一個使用EXTJS和struts實現表格分頁查詢的例子:

EXTJS程式碼:

Ext.onReady(function(){

var proxy=new Ext.data.HttpProxy({url:"getJson.action"});
//Record 定義記錄結果
var Human=Ext.data.Record.create([
{name:"Hid",type:"int",mapping:"hid"},
{name:"Name",type:"string",mapping:"name"},
{name:"Sex",type:"string",mapping:"sex"},
{name:"Education",type:"string",mapping:"edu"},
{name:"Memo",type:"string",mapping:"memo"}
]);
//Reader
var reader = new Ext.data.JsonReader(
{totalProperty:"pageBean.totalProperty",root:"pageBean.root"},
Human);
//Store
var store = new Ext.data.Store({
proxy:proxy,
reader:reader
});
store.load({params:{start:0,limit:6}});
//列模型
var cm=new Ext.grid.ColumnModel([
{header:"ID",width:40,dataIndex:"Hid"},
{header:"姓名",width:80,dataIndex:"Name",tooltip:"您的姓名"},
{header:"性別",width:40,dataIndex:"Sex",align:"center"},
{header:"學歷",width:80,dataIndex:"Education",align:"center"},
{id:"memo",header:"備註",dataIndex:"Memo"}
]);
var grid = new Ext.grid.GridPanel({
title:"中國公民",
width:650,
autoHeight:true,
cm:cm,
store:store,
renderTo:"a",//這個要render到jsp頁面中某個元素上去
autoExpandColumn:"memo",//自動伸展,佔滿剩餘區域
bbar:
new Ext.PagingToolbar({
store:store,
pageSize:6,
displayInfo:true,
displayMsg:"本頁顯示第{0}條到第{1}條的記錄,一共{2}條",
emptyMsg:"沒有記錄"
}),
tbar:[{
xtype:"label",
text:"ID"
},{
xtype:"textfield",
id:"id"
},{
xtype:"label",
text:"姓名"
},{
xtype:'numberfield',
id:"name"
},{
xtype:"button",
text:"查詢",
handler: query
}]
});
function query() {
store.on('beforeload', function() { //Ext.data.JsonStore讀入資料之前的事件,store不需要在寫baseParams,因為會覆蓋掉. (每次呼叫都載入此函式,'load'則第一次不呼叫外,其餘都呼叫).
var id = Ext.getCmp("id");
var name = Ext.getCmp("name");
this.baseParams = {
queryvalue : id.getValue(),
queryvalue2 : name.getValue(),
};
});
store.load({params:{start:0,limit:6}});
}
});

action程式碼:

public class GetJson extends ActionSupport {
private int totalProperty;
private List<Human> list;
private int start;
private int limit;
private PageBean pageBean;

public PageBean getPageBean() {
return pageBean;
}
public void setPageBean(PageBean pageBean) {
this.pageBean = pageBean;
}
public int getTotalProperty() {
return totalProperty;
}
public void setTotalProperty(int totalProperty) {
this.totalProperty = totalProperty;
}
public List<Human> getList() {
return list;
}
public void setList(List<Human> list) {
this.list = list;
}



public int getStart() {
return start;
}
public void setStart(int start) {
this.start = start;
}
public int getLimit() {
return limit;
}
public void setLimit(int limit) {
this.limit = limit;
}
@Override
public String execute() throws Exception {

list = new ArrayList<Human>();
int end = start + limit;
if(end>86)
end=86;
totalProperty=86;
for (int i = start; i <end; i++) {

list.add(new Human(i, "路人甲", "保密", "大學", "測試資料"));
}
pageBean=new PageBean(totalProperty, list);
return SUCCESS;
}
}