1、最近使用 struts2+jquery +json 來實現無刷新的效果
,但遇見不少小問題;
1、頁面
<div class="index_right_2" >
<div style="float:right">
<input class="index_right_2_1" type="button" name="add" id="add" value="新增"/>
<input class="index_right_2_1" type="button" name="update" id="update" value="修改"/>
<input class="index_right_2_1" type="button" name="delete" id="delete" value="刪除"/>
</div>
</div>
<div class="index_right_3">
<table id="table2" width="100%" border="0px" cellspacing="2px" cellpadding="0px" style="table-layout:fixed;">
<tr class="table_one_title">
<th style="width:5%">選擇</th>
<th style="width:5%">序號</th>
<th style="width:20%">編碼</th>
<th style="width:30%">名稱</th>
<th>備註</th>
</tr>
<s:iterator value="list" status="st">
<tr class="table_one_content" id="showTr" >
<td>
<input style="width:100%;height:23px" id="checkbox" name="checkbox" type="checkbox" value="<s:property value="unitId" />" />
</td>
<td>
<input style="width:100%;height:23px" id="indexNum" name="indexNum" type="text" value="<s:property value="num" />" />
</td>
<td>
<input style="width:100%;height:23px" id="vCode" name="vCode" type="text" value="<s:property value="vCode" />" />
</td>
<td>
<input style="width:100%;height:23px" id="vName" name="vName" type="text" value="<s:property value="vName" />" />
</td>
<td>
<input style="width:100%;height:23px" id="sMemo" name="sMemo" type="text" value="<s:property value="sMemo" />" />
</td>
</tr>
</s:iterator>
</table>
</div>
</form>
</div>
<div id="unitedit" class="index_right_unitedit_middle" style="display:none">
<form id="editform" name="editform" >
<div class="index_right_unitedit_input">
<input type="hidden" id="edit_unitId" name="baseVo.unitId" value="" maxlength="16" size="20" >
<label>編碼:</label><input type="text" id="edit_vCode" name="baseVo.vCode" value="" maxlength="16" size="20">
<label>名稱:</label><input type="text" id="edit_vName" name="baseVo.vName" value="" maxlength="50" size="39">
</div>
<div class="index_right_unitedit_input">
<label>備註:</label><textarea rows="3" cols="75" id="edit_sMemo" name="baseVo.sMemo"></textarea>
</div>
<div class="index_right_unitedit_input" style="text-align:center">
<input class="index_right_2_1" type="button" name="save" id="save" value="保存"/>
<input class="index_right_2_1" type="reset" name="reset" id="reset" value="重置"/>
<input class="index_right_2_1" type="button" name="editdel" id="editdel" value="取消"/>
<div>
</form>
</div>
2、jq代碼
$('#update').click(function(){//修改
var aa="";
var iNum=-1;
var unitId = "";
$("input[name='checkbox']:checkbox:checked").each(function(index){//遍歷table打鉤的信息
iNum = index; //只有一條數據時,則爲0,2條就是1
if(index==0){
unitId=$(this).val(); //獲取選中的那一條數據的ID,不清楚怎麼獲取選中的那一行的所有數據
}
});
if(iNum==-1){ //我上面定義爲-1,如果沒有打鉤 則執行這條
alert("請選擇一條數據進行修改");
return false;
}else if(iNum>0){ // 大於0 則 選擇了多條
alert("只能選擇一條數據進行修改");
return false;
}else{
$.ajax({
url:'unitupdate',
dataType:'json',
type:'post',
beforeSend:function(){"這裏可以打印一些信息,增加用戶體驗度"},
data:{
'unitId':unitId
},
success:function(data){
var infoArray = eval("("+data+")");//如果後臺沒有進行json的瘋狂 直接返回pojo對象,這裏可以不需要進行轉化
// alert(infoArray["VName"]); //這種方式與下面的 .都是可以獲取值
$('#edit_unitId').val(infoArray.unitId);
$('#edit_vCode').val(infoArray.VCode);
$('#edit_vName').val(infoArray.VName);
$('#edit_sMemo').val(infoArray.SMemo);
document.getElementById("unitedit").style.display="";
document.getElementById("unitsearch").style.display="none";
//頁面是二部分,我用div來控制顯示那部分
}
});
}
});
3、struts.xml
<package name="unitjson" extends="json-default">
<action name="unitupdate" class="com.dms.base.strust.IndexLeftUnitAction" method="unitupdate">
<result type="json">
<param name="root">result</param>
</result>
</action>
</package>
4、action
/**
* 功能:公司修改傳值功能
* 編寫時間:2013-07-03
* @return
*/
public String unitupdate(){
System.out.println("22==="+unitId);;
BaseVO baseVo = uBiz.findUnit(unitId);
//轉化文 json格式
JSONObject json = JSONObject.fromObject(baseVo);
result = json.toString();
//this.setResult(jsonArray.toString());
System.out.println(result);
return SUCCESS;
}
5、pojo set,get省略
public class BaseVO {
private String unitId = "";// 單位表 bd_unit
private String vCode = "";//編碼
private String vName = "";//名稱
private String vStatus = "";//狀態 1 有效 0 無效
private String sMemo = "";//備註
private String deptId = "";//bd_dept 部門表
private String postId = "";//BD_POST 職位表
private String userId = "";//bd_user_info 操作員表
private String empId = "";//
private String vCarNum = "";//卡號
private String vSex = "";// 0 男 1 女
private String vCarId = "";//
private String vInDate = "";//入廠日期
private String swSate = "";//0 離職 1 在職 是否在職
private int num = 0;
6、上面都是基本的配置信息,下面所說的就是遇見的問題;
6.1、在控制檯:
{"VInDate":"","VCarNum":"","empId":"","VStatus":"",
"postId":"","SMemo":"","VName":"美化","num":0,"VCarId":"","VCode":"002","vsex":"",
"userId":"","swSate":"","deptId":"","unitId":"C0002"}
可以打印出 封裝的json數據;
頁面使用 下面2種方式均可以獲取到值;
var infoArray = eval("("+data+")");
var name= infoArray["VName"]);
var name2 = infoArray.VName);
不知道大家是否注意到 pojo裏面定義的字段與json封裝的字段名有部分不一樣
還有一種方式 就是 後臺直接 返回pojo 對象,不需要json那個封裝方法;
6.2、包也要注意:
當我使用 JSONObject json = JSONObject.fromObject(baseVo);
時,從前端一跳到這個action執行這條語句就沒反應,控制檯沒有錯誤信息
弄了很多才知道缺少ezmorph-1.0.6.jar、commons-httpclient-3.1.jar等包產生的;