ajax完成list无刷新返回
ajax完成list无刷新返回
ajax无刷新技术总结，以下是一段我写的ajax应用的js脚本。其中提交的data刚开始我采用的是$('#formId').serialize();但是出现乱码问题，为了解决乱码问题，我就另外写了一个方法解码，
function serilizeJieMa(){
var params =
$("#formId").serialize(); // http request parameters.
params = decodeURIComponent(params,true);
params = encodeURI(encodeURI(params));
return params;
}在后台只要解码就可以了；
String productType = new
String(vinCodeImportHalfWhForm.getProductType().getBytes("ISO-8859-1"),
"UTF-8");
vinCodeImportHalfWhForm.setProductType(java.net.URLDecoder.decode(productType,
"UTF-8"));
$.ajax({
type:
"POST",
dataType:"json",
url:"./vinCodeImportHalfWhAddQuery.shtml",
data
: serilizeJieMa(),//解决中文乱码问题
async:false,
success
: function(msg){
if(msg=='0'){
ht +="<table align = 'center'
border='0' width='100%' cellspacing='0' cellpadding='0'
>";
ht +="<tr class=
'tb_operate'>";
ht +="<td valign='bottom' align = 'center' width
='100%'
height='24'> ";
ht+="<font
color='red'>数据大于20条，请重新查询！</font>";
$("#testDIV").html(ht);
return;
}
if(msg.jsonCount==0){
ht +="<table align = 'center'
border='0' width='100%' cellspacing='0' cellpadding='0'
>";
ht +="<tr class=
'tb_operate'>";
ht +="<td valign='bottom' align = 'center' width
='100%'
height='24'> ";
ht+="<font
color='red'>无数据！</font>";
$("#testDIV").html(ht);
return;
}
ht
+= " <table id='zhcx' border='0' cellpadding='0'
align ='center' cellspacing='1' class='tb' width='100%'
>";
ht
+= "<tr class='tb_operate'
align='center'><td
width='5%'
>单选</td>";
ht
+= "<td width='5%' nowrap
> 车辆型号</td><td
width='5%' nowrap
>车系名称</td> ";
$.each(msg.jsonArray,function(i,n){
ht+="<tr
class='tb_operate' align='center'><td
align='center'><input type = 'radio'
class='radiobutton' name = 'iRadio' value
='"+n.configureId+"'/></td>";
ht+="<td>"+n.vehicleModel+"</td>";
ht+="<td>"+n.familyName+"</td>";
ht+="</tr>";
});
ht
+="</table>";
ht
+="<table align = 'center' border='0' width='100%'
cellspacing='0' cellpadding='0' >";
ht
+="<tr class=
'tb_operate'>";
ht
+="<td valign='bottom' align = 'center' width
='100%'
height='24'> ";
ht
+="<input type = 'button' class='button' name =
'returnBut' title = 'CRTL + Z' tabindex='1' value = '选择完成
(Z)' onclick = 'javascript:returnValueTo()'
/>";
$("#testDIV").html(ht);
}
})
}else{
$("#testDIV").html(ht);
}
}
在后台
public String
vinCodeImportHalfWhAddQuery(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) throws
java.lang.Exception {
StringBuffer json = new
StringBuffer();
VinCodeImportHalfWhDTO dto =
new VinCodeImportHalfWhDTO();
VinCodeImportHalfWhForm
vinCodeImportHalfWhForm = (VinCodeImportHalfWhForm) form;
BeanUtil.copy(dto,
decodeAjaxForm(vinCodeImportHalfWhForm));
VinCodeImportHalfWhService
vinCodeImportHalfWhService = this.getBean();
List list =
vinCodeImportHalfWhService.getMapVehicles(dto); //得到车型
if (null != list
&& list.size() > 0)
{
if
(list.size() > 20) {
json.append("0");
} else
{
json.append("{jsonCount:'"
+ list.size() +
"',jsonArray:[").append(addHistory(list)).append("]}");
}
} else {
json.append("{jsonCount:'0'}");
}
response.setContentType("text/json;charset=gbk");
response.getWriter().print(json.toString());
return null;
}
其中decodeAjaxForm方法是我写的用于解码的方法，就像上边写的方法一样，哪个字段需要解码就解码哪个字段。这样就完成了ajax无刷新返回list.
