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'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
               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'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
               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 >&nbsp;&nbsp;车辆型号</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'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        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.