springmvc和ajax的全部例子 原

function jajax1() {
    var reqdata = {
        p1:'success'
    }
    $.ajax({
        url: '/testreq/jsonreq',
        type: 'get',//请求方式，get或post
        async: true,//如果async设置为：true,则不会等待ajax请求返回的结果，会直接执行ajax后面的语句,，默认为true异步
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: reqdata,//JSON.stringify(reqdata)
        success: function (response, textStatus, jqXHR) {
            console.log(response);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            var errInfo = {
                XMLHttpRequest: XMLHttpRequest,
                textStatus: textStatus,
                errorThrown: errorThrown,
                success: false
            }
            console.log(errInfo);
        }
    });
    /*
        测试：
            后端
            @RequestMapping("/jsonreq")
            @ResponseBody
            public Map jsonreq(@RequestParam(value = "p1", required = false) String p1) {
                Map map = new HashMap();
                map.put("p1",p1);
                return map;
            }

            参数p1=success
            返回 {"p1":"success"}
    */
}

function jajax2() {
    var reqdata = {
        p1:'success'
    }
    $.ajax({
        url: '/testreq/jsonreq',
        type: 'get',//请求方式，get或post
        async: true,//如果async设置为：true,则不会等待ajax请求返回的结果，会直接执行ajax后面的语句,，默认为true异步
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: JSON.stringify(reqdata),//JSON.stringify(reqdata)
        success: function (response, textStatus, jqXHR) {
            console.log(response);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            var errInfo = {
                XMLHttpRequest: XMLHttpRequest,
                textStatus: textStatus,
                errorThrown: errorThrown,
                success: false
            }
            console.log(errInfo);
        }
    });
    /*
        测试：
            后端1
            @RequestMapping("/jsonreq")
            @ResponseBody
            public Map jsonreq(@RequestParam(value = "p1", required = false) String p1) {
                Map map = new HashMap();
                map.put("p1",p1);
                return map;
            }

            后端2
            @RequestMapping("/jsonreq2")
            @ResponseBody
            public Map jsonreq2(@RequestBody String p1) {
                Map map = new HashMap();
                map.put("p1",p1);
                return map;
            }

            参数 {%22p1%22:%22success%22}
            返回 400 (Bad Request)
    */
}

function jajax3() {
    var reqdata = {
        p1:'success'
    }
    $.ajax({
        url: '/testreq/jsonreq3',
        type: 'post',//请求方式，get或post
        async: true,//如果async设置为：true,则不会等待ajax请求返回的结果，会直接执行ajax后面的语句,，默认为true异步
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: reqdata,//JSON.stringify(reqdata)
        success: function (response, textStatus, jqXHR) {
            console.log(response);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            var errInfo = {
                XMLHttpRequest: XMLHttpRequest,
                textStatus: textStatus,
                errorThrown: errorThrown,
                success: false
            }
            console.log(errInfo);
        }
    });
    /*
        测试：
            后端
            @RequestMapping(value = "/jsonreq3", method = RequestMethod.POST)
            @ResponseBody
            public Map jsonreq3(@RequestBody String p1) {
                Map map = new HashMap();
                map.put("p1",p1);
                return map;
            }
            ===
            前端 data:JSON.stringify(reqdata)
            参数 {"p1":"success"}
            返回 {"p1":"{\"p1\":\"success\"}"}
            ===
            前端 data:reqdata
            参数 p1=success
            返回 {"p1":"p1=success"}

    */
}

function jajax4() {
    var reqdata = {
        p1:'success'
    }
    $.ajax({
        url: '/testreq/jsonreq4',
        type: 'post',//请求方式，get或post
        async: true,//如果async设置为：true,则不会等待ajax请求返回的结果，会直接执行ajax后面的语句,，默认为true异步
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: JSON.stringify(reqdata),//JSON.stringify(reqdata)
        success: function (response, textStatus, jqXHR) {
            console.log(response);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            var errInfo = {
                XMLHttpRequest: XMLHttpRequest,
                textStatus: textStatus,
                errorThrown: errorThrown,
                success: false
            }
            console.log(errInfo);
        }
    });
    /*
        测试：
            后端
            @RequestMapping(value = "/jsonreq4", method = RequestMethod.POST)
            @ResponseBody
            public Map jsonreq4(@RequestParam Map<String, String> params) {
                return params;
            }
            ===
            前端 data:JSON.stringify(reqdata)
            参数 {"p1":"success"}
            返回 {}
            ===
            前端 data:reqdata
            参数 p1=success
            返回 {}

    */
}

function jajax5() {
    var reqdata = {
        p1:'success'
    }
    $.ajax({
        url: '/testreq/jsonreq5',
        type: 'get',//请求方式，get或post
        async: true,//如果async设置为：true,则不会等待ajax请求返回的结果，会直接执行ajax后面的语句,，默认为true异步
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: JSON.stringify(reqdata),//JSON.stringify(reqdata)
        success: function (response, textStatus, jqXHR) {
            console.log(response);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            var errInfo = {
                XMLHttpRequest: XMLHttpRequest,
                textStatus: textStatus,
                errorThrown: errorThrown,
                success: false
            }
            console.log(errInfo);
        }
    });
    /*
        测试：
            后端
            @RequestMapping("/jsonreq5")
            @ResponseBody
            public Map jsonreq5(@RequestParam Map<String, String> params) {
                return params;
            }
            ===
            前端 data:JSON.stringify(reqdata)
            参数 {%22p1%22:%22success%22}
            返回 400 Bad Request
            ===
            前端 data:reqdata
            参数 p1=success
            返回 {"p1":"success"}

    */
}

function jajax6() {
    var reqdata = {
        p1:'success',
        p2:'ok'
    }
    $.ajax({
        url: '/testreq/jsonreq6',
        type: 'get',//请求方式，get或post
        async: true,//如果async设置为：true,则不会等待ajax请求返回的结果，会直接执行ajax后面的语句,，默认为true异步
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: JSON.stringify(reqdata),//JSON.stringify(reqdata)
        success: function (response, textStatus, jqXHR) {
            console.log(response);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            var errInfo = {
                XMLHttpRequest: XMLHttpRequest,
                textStatus: textStatus,
                errorThrown: errorThrown,
                success: false
            }
            console.log(errInfo);
        }
    });
    /*
        测试：
            后端
            @RequestMapping("/jsonreq6")
            @ResponseBody
            public Map jsonreq6(@RequestBody Map<String, String> params) {
                return params;
            }
            ===
            前端 data:JSON.stringify(reqdata)
            参数 {%22p1%22:%22success%22,%22p2%22:%22ok%22}
            返回 400 Bad Request
            ===
            前端 data:reqdata
            参数 p1=success&p2=ok
            返回 400 Bad Request

    */
}

function jajax7() {
    var reqdata = {
        p1:'success',
        p2:'ok'
    }
    $.ajax({
        url: '/testreq/jsonreq7',
        type: 'post',//请求方式，get或post
        async: true,//如果async设置为：true,则不会等待ajax请求返回的结果，会直接执行ajax后面的语句,，默认为true异步
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: reqdata,//JSON.stringify(reqdata)
        success: function (response, textStatus, jqXHR) {
            console.log(response);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            var errInfo = {
                XMLHttpRequest: XMLHttpRequest,
                textStatus: textStatus,
                errorThrown: errorThrown,
                success: false
            }
            console.log(errInfo);
        }
    });
    /*
        测试：
            后端
            @RequestMapping(value = "/jsonreq7", method = RequestMethod.POST)
            @ResponseBody
            public Map jsonreq7(@RequestBody Map<String, String> params) {
                return params;
            }
            ===
            前端 data:JSON.stringify(reqdata)
            参数 {"p1":"success","p2":"ok"}
            返回 {"p1":"success","p2":"ok"}
            ===
            前端 data:reqdata
            参数 p1=success&p2=ok
            返回 400 Bad Request

    */
}


function jajax8() {
    var reqdata = {
        p1:'success',
        p2:[1,2,3],
        p3:['1','2','3']
    }
    $.ajax({
        url: '/testreq/jsonreq8',
        type: 'get',//请求方式，get或post
        async: true,//如果async设置为：true,则不会等待ajax请求返回的结果，会直接执行ajax后面的语句,，默认为true异步
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: reqdata,//JSON.stringify(reqdata)
        success: function (response, textStatus, jqXHR) {
            console.log(response);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            var errInfo = {
                XMLHttpRequest: XMLHttpRequest,
                textStatus: textStatus,
                errorThrown: errorThrown,
                success: false
            }
            console.log(errInfo);
        }
    });
    /*
        测试：
            后端
            @RequestMapping(value = "/jsonreq8", method = RequestMethod.GET)
            @ResponseBody
            public Map jsonreq8(@RequestParam Map<String, String> params) {
                return params;
            }
            ===
            前端 data:JSON.stringify(reqdata)
            参数 {"p1":"success","p2":[1,2,3],"p3":["1","2","3"]}:
            返回 400 Bad Request
            ===
            前端 data:reqdata
            p1: success
            p2[]: 1
            p2[]: 2
            p2[]: 3
            p3[]: 1
            p3[]: 2
            p3[]: 3
            参数 p1=success&p2%5B%5D=1&p2%5B%5D=2&p2%5B%5D=3&p3%5B%5D=1&p3%5B%5D=2&p3%5B%5D=3
            返回 {"p1":"success","p2[]":"1","p3[]":"1"}

            //改后
            @RequestMapping(value = "/jsonreq8", method = RequestMethod.GET)
            @ResponseBody
            public Map jsonreq8(
                @RequestParam(value="p1", required=false,defaultValue="") String p1,
                @RequestParam(value="p2[]", required=false,defaultValue="") String p2,
                @RequestParam(value="p3[]", required=false,defaultValue="") String p3
            ) {
                Map map = new HashMap();
                map.put("p1",p1);
                map.put("p2",p2);
                map.put("p3",p3);
                return map;
            }
            ===
            前端 data:JSON.stringify(reqdata)
            参数 {"p1":"success","p2":[1,2,3],"p3":["1","2","3"]}:
            返回 400 Bad Request
            ===SUCCESS
            前端 data:reqdata
            p1: success
            p2[]: 1
            p2[]: 2
            p2[]: 3
            p3[]: 1
            p3[]: 2
            p3[]: 3
            参数 p1=success&p2%5B%5D=1&p2%5B%5D=2&p2%5B%5D=3&p3%5B%5D=1&p3%5B%5D=2&p3%5B%5D=3
            返回 {"p1":"success","p2":"1,2,3","p3":"1,2,3"}
    */
}


function jajax9() {
    var reqdata = {
        p1: 'success',
        p2: [1, 2, 3],
        p3: ['1', '2', '3']
    }
    $.ajax({
        url: '/testreq/jsonreq9',
        type: 'post',//请求方式，get或post
        async: true,//如果async设置为：true,则不会等待ajax请求返回的结果，会直接执行ajax后面的语句,，默认为true异步
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: JSON.stringify(reqdata),//JSON.stringify(reqdata)
        success: function (response, textStatus, jqXHR) {
            console.log(response);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            var errInfo = {
                XMLHttpRequest: XMLHttpRequest,
                textStatus: textStatus,
                errorThrown: errorThrown,
                success: false
            }
            console.log(errInfo);
        }
    });
    /*
        测试：
            后端
            @RequestMapping(value = "/jsonreq9", method = RequestMethod.POST)
            @ResponseBody
            public Map jsonreq7(@RequestBody Map<String, String> params) {
                return params;
            }
            ===
            前端 data:JSON.stringify(reqdata)
            参数 {"p1":"success","p2":[1,2,3],"p3":["1","2","3"]}
            返回 {"p1":"success","p2":[1,2,3],"p3":["1","2","3"]}
            ===
            前端 data:reqdata
            参数 p1=success&p2%5B%5D=1&p2%5B%5D=2&p2%5B%5D=3&p3%5B%5D=1&p3%5B%5D=2&p3%5B%5D=3
            返回 400 Bad Request

    */
}