ajax和Controller相互传递json数据的实现（post和get）

post和get两种方式的代码略有不同（如get需要手动处理中文乱码），下面给出具体实现：

1、post方式

前端代码：

<script type="text/javascript" src="<c:url value="/lib/jquery.min.js"/>"></script>
<script>
    $(function(){
        $("#btn_regist").click(function(){
            //向后台发送的数据
            var postData = {
                u_email:$('#u_email').val(),
                u_pwd:$('#u_pwd').val(),
                u_nick:$('#u_nick').val()
            }
            $.ajax({
                url:"/coderstore/user/regist.action",
                data:JSON.stringify(postData),
                type:"POST",
                //设置接收格式为JSON
                dataType:"json",
                //编码设置
                contentType:"application/json;charset=utf-8",
                //后台返回成功后处理数据，data为后台返回的json格式数据
                success:function(data){
                    if(data != null){
                        $('#msg').text(data.msg);
                    }
                    else{
                        $('#msg').text("未知错误");
                    }
                },
                //查询错误处理
                error:function (XMLHttpResponse, textStatus, errorThrown) {
                    console.log("1 异步调用返回失败,XMLHttpResponse.readyState:"+XMLHttpResponse.readyState);
                    console.log("2 异步调用返回失败,XMLHttpResponse.status:"+XMLHttpResponse.status);
                    console.log("3 异步调用返回失败,textStatus:"+textStatus);
                    console.log("4 异步调用返回失败,errorThrown:"+errorThrown);
                }
            });
        });
    });
</script>

我们将需要传递的数据写入postData对象中，在发送data时使用JSON.stringify()来将js对象转换为JSON字符串。

Controller代码：

@RequestMapping(value = "/regist.action", method = RequestMethod.POST)
    public void regist(@RequestBody Map<String, String> params, HttpServletResponse response) {
        response.setContentType("application/json;charset=utf-8");
        String u_email = params.get("u_email");
        String u_pwd = params.get("u_pwd");
        String u_nick = params.get("u_nick");
        
        // ... 具体的业务逻辑
	
        try {
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("code", code);
            jsonObject.put("msg", msg);
            response.getWriter().write(jsonObject.toJSONString());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

Controller使用一个Map来获取前台传递的数据，这里必须加上注解@RequestBody，同时声明参数HttpServletResponse，便于向前台回传数据。由于在web.xml中配置了POST乱码过滤器，所以这里不需要处理前台传递的数据。需要注意的是，Controller向前台回传数据需要设置response.setContentType(“application/json;charset=utf-8”);防止中文乱码。

post方式传递数据可能遇到的坑

如果ajax请求Controller成功了，响应码200，但是回传数据的时候代码却没有进入success块，走的是error块，原因很可能是Controller回传的json数据格式不对。由于ajax中设置了接收格式dataType:“json”，因此后台返回的数据必须严格按照json格式。严格的json格式是{“key1”:“value1”,“key2”:“value2”}，这里必须使用双引号，单引号会报错（亲身尝试）！！为了避免手动拼接json数据造成的格式不规范，建议使用JSONObject来转换数据，具体用法已在上面代码给出。

2、get方式

前端代码：

<script type="text/javascript" src="<c:url value="/lib/jquery.min.js"/>"></script>
<script>
    $(function(){
        $("#btn_regist").click(function(){
            $.ajax({
                url:"/coderstore/user/regist.action",
                data:{
                    u_email:$('#u_email').val(),
                    u_pwd:$('#u_pwd').val(),
                    u_nick:$('#u_nick').val()
                },
                type:"GET",
                //设置接收格式为JSON
                dataType:"json",
                //编码设置
                contentType:"application/json;charset=utf-8",
                //后台返回成功后处理数据，data为后台返回的json格式数据
                success:function(data){
                    if(data != null){
                        alert(data.msg);
                        $('#msg').text(data.msg);
                    }
                    else{
                        $('#msg').text("未知错误");
                    }
                },
                //查询错误处理
                error:function (XMLHttpResponse, textStatus, errorThrown) {
                    console.log("1 异步调用返回失败,XMLHttpResponse.readyState:"+XMLHttpResponse.readyState);
                    console.log("2 异步调用返回失败,XMLHttpResponse.status:"+XMLHttpResponse.status);
                    console.log("3 异步调用返回失败,textStatus:"+textStatus);
                    console.log("4 异步调用返回失败,errorThrown:"+errorThrown);
                }
            });
        });
    });
</script>

get方式和post方式不同的是，这里直接把需要传递的数据写在ajax的data块中了，同时修改type为GET方式。

Controller代码：

@RequestMapping(value = "/regist.action")
    public void regist(@RequestParam("u_email") String u_email, @RequestParam("u_pwd") String u_pwd,
                  @RequestParam("u_nick") String u_nick, HttpServletResponse response)
            throws UnsupportedEncodingException {
        response.setContentType("application/json;charset=utf-8");
        u_nick = new String(u_nick.getBytes("ISO-8859-1"), "UTF-8"); // 解决get中文乱码
        
        // ... 具体的业务逻辑
	
        try {
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("code", 1);
            jsonObject.put("msg", "成功");
            response.getWriter().write(jsonObject.toJSONString());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

Controller接收参数使用@RequestParam注解。由于web.xml的乱码过滤器只对post有效，因此前台传递参数的若有中文，需要使用ISO-8859-1来解码后用UTF-8编码。其余处理与post方式相同。