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方式相同。