目标：本周做了一个300多项的form表单查询和保存。

    思考：之前做查询和保存，用的是提交后同步跳转；这次想使用不同的方式来做；采用了ajax异步查询和保存试试。

    过程：

1. 选择jQuery中的ajax函数和spring mvc框架，数据交互采用json形式
   

2. 先写后台，类用了注解

   @Controller
   @RequestMapping("/baController")

   方法用了注解

   @RequestMapping(value="http://www.mamicode.com/queryba.do", produces = {"application/json;charset=UTF-8"})
   @ResponseBody
   json框架用了ali的fastjson，补充一点：默认的json中的key是小写字母，所以我设置了变量在代码里；返回json中有汉字，用到了produces里的设置；ResponseBody设置，可以直接在方法最后返回json，不用在指定dispatcher

    //设置json串中key首字母是大写
    static
    {
        TypeUtils.compatibleWithJavaBean = true;
    }   

后台写jdbc查询时，用了以下代码：

RowMapper<BaBean> rm = ParameterizedBeanPropertyRowMapper.newInstance(BaBean.class);

        try{
            BaBean ba =  (BaBean)jdbcTemplate.queryForObject(sql, rm);
            //转为json
            String strjson = JSON.toJSONString(ba);
            return strjson;        
            
        }catch(EmptyResultDataAccessException e){
            return "{\"result\":\"false\"}";
        }

通过很短方式，就把300多项数据组装完毕，效率还是蛮高的。spring的jdbcTemplate.queryForObject方法再拼接大数据量时，效率高。

3.验证后台没问题后，再写前台：

前台页面中工作量最大的就是标签里的300多项，咬牙写完；在查询和保存中，都用到了一些小技巧，查询后渲染页面中的值，采用json数据循环：

//查询
        $(document).ready(function(){
              $("#bq").click(function(){
                var caseid= $("#querybah").val();  
                
                 $.ajax({url:"/jmyy/baController/queryba.do?caseid="+caseid,
                         async:false,
                        dataType:"json",
                        cache: false,
                        success:function(data){
                            if(data["result"]=="false"){
                                alert("没查询出结果");
                            }else{            

                                for(var item in data){  
                                    var jValue=http://www.mamicode.com/data[item];//key所对应的value
                                    $("#"+item).attr("value",jValue);
                                    }
                            }    
                        }
                         });

                 
                  }
              );
        });

                               

修改后保存，采用了form表单的序列化，避免了手动去遍：

    //保存
        $(document).ready(function(){
        $("#bb").click(function(){    
            
            $.ajax({
                type:"POST",
                url:"/jmyy/baController/saveba.do",
                data:$("#baform").serializeArray(),
                dataType:"json",
                cache: false,
                success:function(data){
                    alert("保存成功！");
                    //数据清空
                    window.location.reload();
                }
                });
            }
            
        );
        });

本文出自 “技术研究积累” 博客，请务必保留此出处http://cn888.blog.51cto.com/6185808/1879346

form表单数据量很大时的查询和保存