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+="<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.