SpringMVC与Ajax数据交互

简单说下需求，页面通过ajax发送一个json数据，controller控制器接收到json数据后，以此为条件在数据库中进行查询。将查询到的对象返回给页面。

1.java 控制器：

@Controller
@RequestMapping("/userAndDevice")
public class UserDeviceManagerController {

    @Resource
    private CustomerInfoService cInfoService;
    @Autowired
    private DeviceInfoService dInfoService;
    /**
     * 根据用户名查询用户的ajax
     * @param name
     * @return
     */
    @RequestMapping("/cusAjax")
    @ResponseBody 
    public List<Customer> cusAjax(String username) {
        System.err.println("获取到的值是"+username);
        SysUser user = (SysUser) SecurityUtils.getSubject().getPrincipal();
        List<Customer> list=cInfoService.getCustomerByName(1, username); 
        return list;

    }
}

其中Customer是一个商户的对象，每个商户有可以有多个设备（Device）。具体的pojo这里就不贴了。Customer和Device是一对多的关系。
接收的参数名称为username，和ajax提交数据的名称要保持一致。

2. freemarker页面：

                            <form class="form-horizontal">
                                <div class="panel-body">
                                    <div class="input-group mar-btm">
                                        <input type="text" placeholder="请输入用户名" class="form-control"
                                            id="myInput"> <span class="input-group-btn"
                                            style="color: #5acde2">
                                            <div class="btn btn-mint" id="search">搜索</div>
                                        </span>
                                    </div>
                                </div>
                            </form>

input不要有name属性，提交标签不要有type=“submit”属性，否则可能会刷新页面

<script  type="text/javascript">
$(function(){

    $("#search").click(function(){
        //从input获取数据
        var value=$("#myInput").val();
        //json形式必须和controller中的参数一一对应
        var param = {username : value};
       $.ajax({
            timeout : 2000,
            type : "POST",
            dataType : "JSON",
            url : "/userAndDevice/cusAjax",
            data : param,
            success : function(data){
                  if(data!=null){
                        $(data).each(function(){
                           $("tr td:lt(220000)").remove();
                           $("#myTd").append("<td>"+this.name+"</td>");
                           $("#myTd").append("<td>"+this.email+"</td>");
                           $("#myTd").append("<td>"+timeStamp2String(this.created)+"</td>");
                           $("#myTd").append("<td>"+timeStamp2String(this.updated)+"</td>");
                           $("#myTd").append("<td>"+this.devices[0].mac+"</td>");
                        });
                    }
            }
        });
        });
})
</script>