ajax前后台通信验错

默认contenType下
contentType为application/json时

默认contenType下

在ajax中不写contentType的情况下

contentType："application/x-www-form-urlencoded;charset=UTF-8" (默认)

总结以下例证：

当ajax为默认的application/x-www-form-urlencoded时，能够处理简单的JSON(单层)，遇到复杂的嵌套JSON的情况就不能处理了(含数组情况)；

这种情况下要处理嵌套JSON的内容，必须将其转化成传统的key=value的形式后放入ajax的data中。

相对而言，在简单的JSON情况下，后台的controller中直接在方法上写形参即可，亦可用vo对象接收；而在复杂参数的情况下，必须使用vo对象来进行值接收，再写在形参上是行不通的。

1.当为简单JSON时

以下传输的json中4个字段都为字符串

ajax

// 例如：

// -----------------right-begin-----------------

var history = 'aaa';

var professionScale = 'bbb';

var constructionScale = 'ccc';

var award = 'ddd';

$.ajax({

    url:"/api/admin/about-JK/edit-JK-text",

    type: "POST",

    // 期待服务器返回的类型：json、jsonp、text ... 此参数加上最好

    dataType: "json",

    data: {

        "history": history,

        "professionScale": professionScale,

        "constructionScale": constructionScale,

        "award": award},

    success: function (res) {

        if (res.code == 0) {

            console.log(res);

        } else {

            console.log(res);

        }

    },

    error: function () {

       console.log('请求系统异常');

    }

});

// -----------------right-end-----------------

controller

// -----------------right-begin-----------------

// 以下1.2均可

// 1.用单独的字段来接收

@PostMapping("/api/admin/about-JK/edit-JK-text")

// 顺便补充，如果前台json传过来的名称中有和参数名称不对应的情况

// 例如：profession_scale，只需要在参数前加

// @RequestParam("profession_scale") String professionScale

// 但是只能是用单个参数接收的时候可以用，但是如果是vo对象接收，就没有办法了！

// 还是只能修改ajax中data的key

public JsonData editAboutJKTextAdmin(

    String history, String professionScale,String constructionScale,

	String award) {

    JsonData json = aboutJKService.editAboutJKText(aboutJKVo);

    return json;

}

// 2.用vo对象来接受

@PostMapping("/api/admin/about-JK/edit-JK-text")

public JsonData editAboutJKTextAdmin(AboutJKVo aboutJKVo) {

    JsonData json = aboutJKService.editAboutJKText(aboutJKVo);

    return json;

}

// -----------------right-end-----------------

vo

// -----------------right-begin-----------------

@Data //lombok

@AllArgsConstructor //lombok

@NoArgsConstructor //lombok

public class AboutJKVo implements Serializable {

    private String history;

    private String professionScale;

    private String constructionScale;

    private String award;

}

// -----------------right-end-----------------

2.当为复杂JSON的时候

意为多重嵌套的JSON，最典型的即含有数组的JSON

ajax

// 1.

// ------------------- error-begin -------------------

// 服务器直接 500

var carouselLink = new Array();

carouselLink.push('1.jpg');

carouselLink.push('2.jpg');

carouselLink.push('3.jpg');

var history = 'aaa';

var professionScale = 'bbb';

var constructionScale = 'ccc';

var award = 'ddd';

$.ajax({

    url:"/api/admin/about-JK/edit-JK-text",

    type: "POST",

    // 期待服务器返回的类型：json、jsonp、text ... 此参数加上最好

    dataType: "json",

    data: {

        "carouselLink": carouselLink,

        "history": history,

        "professionScale": professionScale,

        "constructionScale": constructionScale,

        "award": award},

    success: function (res) {

        if (res.code == 0) {

            console.log(res);

        } else {

            console.log(res);

        }

    },

    error: function () {

       console.log('请求系统异常');

    }

});

// ------------------- error-end -------------------

// 如果还要使用默认contentType为application/x-www-form-urlencoded;charset=UTF-8

// 以上的ajax已经行不通了！

// 那应该怎么写？

// 使用application/x-www-form-urlencoded兼容度最高的key=value形式

// 2.

// ------------------- right-begin -------------------

var carouselLink = new Array();

carouselLink.push('1.jpg');

carouselLink.push('2.jpg');

carouselLink.push('3.jpg');

var history = 'aaa';

var professionScale = 'bbb';

var constructionScale = 'ccc';

var award = 'ddd';

$.ajax({

    url:"/api/admin/about-JK/edit-JK-text",

    type: "POST",

    // 期待服务器返回的类型：json、jsonp、text ... 此参数加上最好

    dataType: "json",

    data:

    "carouselLink="+carouselLink+"&history=" + history+

    "&professionScale="+ professionScale +

    "&constructionScale="+ constructionScale +"&award=" + award,

    dataType: "json",

    success: function (res) {

        if (res.code == 0) {

            console.log(res);

        } else {

            console.log(res);

        }

    },

    error: function () {

        console.log('请求系统异常');

    }

});

// ------------------- right-end -------------------

controller

// 3.

// ------------------- error-begin -------------------

// 1.用单独的字段来接收

// 服务器也是直接 500

@PostMapping("/api/admin/about-JK/edit-JK-text")

public JsonData editAboutJKTextAdmin(

    List<String> carouselLink,

    String history, String professionScale,String constructionScale,

    String award) {

    System.out.println(carouselLink + history +

                       professionScale + constructionScale + award);

    return null;

}

// ------------------- error-end -------------------

// 当key=value中有了list之后，controller内便不能直接用参数接收了！

// 只能通过vo对象来接收

// 4.

// -----------------right-begin-----------------

// 2.用vo对象来接受

@PostMapping("/api/admin/about-JK/edit-JK-text")

public JsonData editAboutJKTextAdmin(AboutJKVo aboutJKVo) {

    System.out.println(aboutJKVo);

    return null;

}

// -----------------right-end-----------------

vo

// -----------------right-begin-----------------

@Data

@AllArgsConstructor

@NoArgsConstructor

public class AboutJKVo implements Serializable {

    private List<String> carouselLink;

    private String history;

    private String professionScale;

    private String constructionScale;

    private String award;

}

// -----------------right-end-----------------

结果

1 和 3 组合 500 NoSuchMethodException

1 和 4 组合 500 java.lang.NumberFormatException: For input string: ""

2 和 3 组合 500 NoSuchMethodException

2 和 4 组合 success！

contentType为application/json时

在ajax中声明 contentType的类型：

contentType: "application/json"

总结以下例证

1.当ajax声明contentType: "application/json"之后，与之对应，不能再像默认contentType为application/x-www-form-urlencoded的时候一样，直接传递json对象了，必须传递json字符串！

通过JSON.stringify() 去将json对象转化成json字符串。

2.与之对应，controller需要注意的是：

controller中，跟在@RequestBody后的参数，和ajax传递过来的json字符串，必须是严格的json层级对应情况！
- 情况一：假如ajax传输的json字符串为'[1, 2, 3]' 与之对应，controller的形参中，就必须有一个List<Integer> list 去接收它。
- 情况二：假如ajax传输的json字符串为'{"names":["aaa", "bbb", "ccc"]}'，那么controller的形参中，就必须是一个vo对象，并且对象中有一个叫做names的List<String>。
- 总：只要外部有{}，则controller应该用vo对象接收，直接是'aaa'字符串，或者['aaa', 'bbb']数组，则必须用一个对应的String 类型，或者List<string>类型来接收。
@RequestBody在一个controller层方法中，只能出现一次。
- 如果一个方法形参中出现多个@RequestBody，将会注入失败。
- 如果只有一个String类型的参数，但是ajax传输过来的是一个复杂json，那么这个复杂json将以字符串的形式被全部注入到那个String类型的参数中，这是一种极端情况。

3.补充，建议：可能是jquery的版本问题，在我原来使用3.x版本的jquery时，出现过复杂json无法注入vo对象的情况，原因是jquery默认会调用jQuery.param深度序列化参数，以适应如PHP和Ruby on Rails框架，但servelt api无法处理。但这里我使用的jquery-2.1.1并未出现此状况。

但稳妥起见，建议在ajax中加上参数traditional:true，来保障json的解析正常！

1.restful风格下传递复杂json

ajax

// 1.

// ------------------- error-begin -------------------

var carouselLink = new Array();

carouselLink.push('1.jpg');

carouselLink.push('2.jpg');

carouselLink.push('3.jpg');

var history = 'aaa';

var professionScale = 'bbb';

var constructionScale = 'ccc';

var award = 'ddd';

$.ajax({

    url:"/api/admin/about-JK/edit-JK-text",

    contentType:'application/json',

    type: "POST",

    // 期待服务器返回的类型：json、jsonp、text ... 此参数加上最好

    dataType: "json",

    data:{

        "carouselLink": carouselLink,

        "history": history,

        "professionScale": professionScale,

        "constructionScale": constructionScale,

        "award": award},

    dataType: "json",

    success: function (res) {

        if (res.code == 0) {

            console.log(res);

        } else {

            console.log(res);

        }

    },

    error: function () {

        console.log('请求系统异常');

    }

});

// ------------------- right-end -------------------

// 2.

// -----------------right-begin-----------------

var carouselLink = new Array();

carouselLink.push('1.jpg');

carouselLink.push('2.jpg');

carouselLink.push('3.jpg');

var history = 'aaa';

var professionScale = 'bbb';

var constructionScale = 'ccc';

var award = 'ddd';

var dataJSON = {

    "carouselLink": carouselLink,

    "history": history,

    "professionScale": professionScale,

    "constructionScale": constructionScale,

    "award": award}

var dataJSONStr = JSON.stringify(dataJSON);

console.log(dataJSON)

console.log(dataJSONStr)

$.ajax({

    url:"/api/admin/about-JK/edit-JK-text",

    contentType:'application/json',

    type: "POST",

    data: dataJSONStr,

    // 期待服务器返回的类型：json、jsonp、text ... 此参数加上最好

    dataType: "json",

    success: function (res) {

        if (res.code == 0) {

            console.log(res);

        } else {

            console.log(res);

        }

    },

    error: function () {

        console.log('请求系统异常');

    }

});

// -----------------right-end-----------------

controller

// 3.

// ------------------- error-begin -------------------

@PostMapping("/api/admin/about-JK/edit-JK-text")

public JsonData editAboutJKTextAdmin(List<String> carouselLink, String history,

                                     String professionScale, String constructionScale,

                                     String award) {

    System.out.println(carouselLink +

                       history +

                       professionScale +

                       constructionScale + award);

    return null;

}

// ------------------- error-end -------------------

// 4.

// ------------------- error-begin -------------------

@PostMapping("/api/admin/about-JK/edit-JK-text")

public JsonData editAboutJKTextAdmin(@RequestBody List<String> carouselLink,

                                     @RequestBody String history,

                                     @RequestBody String professionScale,

                                     @RequestBody String constructionScale,

                                     @RequestBody String award) {

    System.out.println(carouselLink +

                       history +

                       professionScale +

                       constructionScale + award);

    return null;

}

// ------------------- error-end -------------------

// 5.

// ------------------- error-begin -------------------

@PostMapping("/api/admin/about-JK/edit-JK-text")

public JsonData editAboutJKTextAdmin(AboutJKVo aboutJKVo) {

    System.out.println(aboutJKVo);

    return null;

}

// ------------------- error-end -------------------

// 6.

// -----------------right-begin-----------------

@PostMapping("/api/admin/about-JK/edit-JK-text")

public JsonData editAboutJKTextAdmin(@RequestBody AboutJKVo aboutJKVo) {

    System.out.println(aboutJKVo);

    return null;

}

// -----------------right-end-----------------

vo

// -----------------right-begin-----------------

@Data

@AllArgsConstructor

@NoArgsConstructor

public class AboutJKVo implements Serializable {

    private List<String> carouselLink;

    private String history;

    private String professionScale;

    private String constructionScale;

    private String award;

}

// -----------------right-end-----------------

结果

1 和 3 组合 500 NoSuchMethodException

1 和 4 组合 400 JSON parse error: Unrecognized token 'carouselLink'

1 和 5 组合无报错，但

AboutJKVo(carouselLink=null, history=null, professionScale=null, constructionScale=null, award=null)

1 和 6 组合 400 badRequest！

2 和 3 组合 500 NoSuchMethodException

2 和 4 组合 400 JSON parse error

2 和 5 组合无报错，但

AboutJKVo(carouselLink=null, history=null, professionScale=null, constructionScale=null, award=null)

2 和 6 组合 success！

2.restful风格下传递简单json

ajax

// 1.

// ------------------- error-begin -------------------

var history = 'aaa';

var professionScale = 'bbb';

var constructionScale = 'ccc';

var award = 'ddd';

$.ajax({

    url:"/api/admin/about-JK/edit-JK-text",

    contentType:'application/json',

    type: "POST",

    // 期待服务器返回的类型：json、jsonp、text ... 此参数加上最好

    dataType: "json",

    data:{

        "history": history,

        "professionScale": professionScale,

        "constructionScale": constructionScale,

        "award": award},

    dataType: "json",

    success: function (res) {

        if (res.code == 0) {

            console.log(res);

        } else {

            console.log(res);

        }

    },

    error: function () {

        console.log('请求系统异常');

    }

});

// ------------------- error-end -------------------

// 2.

// -----------------right-begin-----------------

var history = 'aaa';

var professionScale = 'bbb';

var constructionScale = 'ccc';

var award = 'ddd';

var dataJSON = {

    "history": history,

    "professionScale": professionScale,

    "constructionScale": constructionScale,

    "award": award}

var dataJSONStr = JSON.stringify(dataJSON);

console.log(dataJSON)

console.log(dataJSONStr)

$.ajax({

    url:"/api/admin/about-JK/edit-JK-text",

    contentType:'application/json',

    type: "POST",

    data: dataJSONStr,

    // 期待服务器返回的类型：json、jsonp、text ... 此参数加上最好

    dataType: "json",

    success: function (res) {

        if (res.code == 0) {

            console.log(res);

        } else {

            console.log(res);

        }

    },

    error: function () {

        console.log('请求系统异常');

    }

});

// -----------------right-end-----------------

controller

// 3.

// ------------------- error-begin -------------------

@PostMapping("/api/admin/about-JK/edit-JK-text")

public JsonData editAboutJKTextAdmin(String history, String professionScale,

                                     String constructionScale,

                                     String award) {

    System.out.println(history +

                       professionScale +

                       constructionScale + award);

    return null;

}

// ------------------- error-end -------------------

// 4.

// ------------------- error-begin -------------------

@PostMapping("/api/admin/about-JK/edit-JK-text")

public JsonData editAboutJKTextAdmin(@RequestBody String history,

                                     @RequestBody String professionScale,

                                     @RequestBody String constructionScale,

                                     @RequestBody String award) {

    System.out.println(history +

                       professionScale +

                       constructionScale + award);

    return null;

}

// ------------------- error-end -------------------

// 5.

// ------------------- error-begin -------------------

@PostMapping("/api/admin/about-JK/edit-JK-text")

public JsonData editAboutJKTextAdmin(AboutJKVo aboutJKVo) {

    System.out.println(aboutJKVo);

    return null;

}

// ------------------- error-end -------------------

// 6.

// -----------------right-begin-----------------

@PostMapping("/api/admin/about-JK/edit-JK-text")

public JsonData editAboutJKTextAdmin(@RequestBody AboutJKVo aboutJKVo) {

    System.out.println(aboutJKVo);

    return null;

}

// -----------------right-end-----------------

vo

// -----------------right-begin-----------------

@Data

@AllArgsConstructor

@NoArgsConstructor

public class AboutJKVo implements Serializable {

    private String history;

    private String professionScale;

    private String constructionScale;

    private String award;

}

// -----------------right-end-----------------

结果

1 和 3 组合无报错，但 4个参数全为null

1 和 4 组合 400 badRequest @RequestBody需要的参数无法注入

1 和 5 组合无报错，但 4个参数全为null

1 和 6 组合 JSON parse error

2 和 3 组合无报错，但4个参数全为null

2 和 4 组合 400 badRequest @RequestBody需要的参数无法注入

2 和 5 组合无报错，但 4个参数全为null

2 和 6 组合 success！

3.restful风格下传递list

ajax

// 1.

var list = new Array();

list.push('1.jpg');

list.push('2.jpg');

list.push('3.jpg');

$.ajax({

    url:"/api/admin/about-JK/edit-JK-text",

    contentType:'application/json',

    type: "POST",

    // 期待服务器返回的类型：json、jsonp、text ... 此参数加上最好

    dataType: "json",

    data:list,

    dataType: "json",

    success: function (res) {

        if (res.code == 0) {

            console.log(res);

        } else {

            console.log(res);

        }

    },

    error: function () {

        console.log('请求系统异常');

    }

});

// 2.

var list = new Array();

list.push('1.jpg');

list.push('2.jpg');

list.push('3.jpg');

$.ajax({

    url:"/api/admin/about-JK/edit-JK-text",

    contentType:'application/json',

    type: "POST",

    // 期待服务器返回的类型：json、jsonp、text ... 此参数加上最好

    dataType: "json",

    data:{'list':list},

    dataType: "json",

    success: function (res) {

        if (res.code == 0) {

            console.log(res);

        } else {

            console.log(res);

        }

    },

    error: function () {

        console.log('请求系统异常');

    }

});

// 2.+

var list = new Array();

list.push('1.jpg');

list.push('2.jpg');

list.push('3.jpg');

var dataJSON = {'list':list}

var dataJSONStr = JSON.stringify(dataJSON);

$.ajax({

    url:"/api/admin/about-JK/edit-JK-text",

    contentType:'application/json',

    type: "POST",

    // 期待服务器返回的类型：json、jsonp、text ... 此参数加上最好

    dataType: "json",

    data: dataJSONStr,

    dataType: "json",

    success: function (res) {

        if (res.code == 0) {

            console.log(res);

        } else {

            console.log(res);

        }

    },

    error: function () {

        console.log('请求系统异常');

    }

});

// 3.

var carouselLink = new Array();

carouselLink.push('1.jpg');

carouselLink.push('2.jpg');

carouselLink.push('3.jpg');

var list = JSON.stringify(carouselLink);

$.ajax({

    url:"/api/admin/about-JK/edit-JK-text",

    contentType:'application/json',

    type: "POST",

    // 期待服务器返回的类型：json、jsonp、text ... 此参数加上最好

    dataType: "json",

    data:list,

    dataType: "json",

    success: function (res) {

        if (res.code == 0) {

            console.log(res);

        } else {

            console.log(res);

        }

    },

    error: function () {

        console.log('请求系统异常');

    }

});

controller

// 4.

@PostMapping("/api/admin/about-JK/edit-JK-text")

public JsonData editAboutJKTextAdmin(List<String> list) {

    System.out.println(list);

    return null;

}

// 5.

@PostMapping("/api/admin/about-JK/edit-JK-text")

public JsonData editAboutJKTextAdmin(@RequestBody List<String> list) {

    System.out.println(list);

    return null;

}

// 6.

@PostMapping("/api/admin/about-JK/edit-JK-text")

public JsonData editAboutJKTextAdmin(AboutJKVo aboutJKVo) {

    System.out.println(aboutJKVo);

    return null;

}

// 7.

@PostMapping("/api/admin/about-JK/edit-JK-text")

public JsonData editAboutJKTextAdmin(@RequestBody AboutJKVo aboutJKVo) {

    System.out.println(aboutJKVo);

    return null;

}

vo

@Data

@AllArgsConstructor

@NoArgsConstructor

public class AboutJKVo implements Serializable {

    private List<String> list;

}

结果

1 和 4 500 NoSuchMethodException

1 和 5 400 JSON parse error

1 和 6 无报错，但为null

1 和 7 400 JSON parse error

2 和 4 500 NoSuchMethodException

2 和 5 400 JSON parse error

2 和 6 无报错，但为null

2 和 7 400 JSON parse error

3 和 4 500 NoSuchMethodException

3 和 5 success！

3 和 6 无报错，但为null

3 和 7 400 JSON parse error

2+ 和 4 500 NoSuchMethodException

2+ 和 5 400 JSON parse error

2+ 和 6 无报错，但为null

2+ 和 7 success！

4.restful下传递单参

ajax

// 1.

var professionScale = 'aaa'

$.ajax({

    url:"/api/admin/about-JK/edit-JK-text",

    contentType:'application/json',

    type: "POST",

    // 期待服务器返回的类型：json、jsonp、text ... 此参数加上最好

    dataType: "json",

    data: professionScale,

    dataType: "json",

    success: function (res) {

        if (res.code == 0) {

            console.log(res);

        } else {

            console.log(res);

        }

    },

    error: function () {

        console.log('请求系统异常');

    }

});

// 2.

var professionScale = 'aaa'

$.ajax({

    url:"/api/admin/about-JK/edit-JK-text",

    contentType:'application/json',

    type: "POST",

    // 期待服务器返回的类型：json、jsonp、text ... 此参数加上最好

    dataType: "json",

    data:{'professionScale':professionScale},

    dataType: "json",

    success: function (res) {

        if (res.code == 0) {

            console.log(res);

        } else {

            console.log(res);

        }

    },

    error: function () {

        console.log('请求系统异常');

    }

});

// 3.

var professionScale = 'aaa'

var dataJSON = {'professionScale':professionScale}

var dataJSONStr = JSON.stringify(dataJSON);

$.ajax({

    url:"/api/admin/about-JK/edit-JK-text",

    contentType:'application/json',

    type: "POST",

    // 期待服务器返回的类型：json、jsonp、text ... 此参数加上最好

    dataType: "json",

    data: dataJSONStr,

    dataType: "json",

    success: function (res) {

        if (res.code == 0) {

            console.log(res);

        } else {

            console.log(res);

        }

    },

    error: function () {

        console.log('请求系统异常');

    }

});

controller

// 4.

@PostMapping("/api/admin/about-JK/edit-JK-text")

public JsonData editAboutJKTextAdmin(String professionScale) {

    System.out.println(professionScale);

    return null;

}

// 5.

@PostMapping("/api/admin/about-JK/edit-JK-text")

public JsonData editAboutJKTextAdmin(@RequestBody String professionScale) {

    System.out.println(professionScale);

    return null;

}

// 6.

@PostMapping("/api/admin/about-JK/edit-JK-text")

public JsonData editAboutJKTextAdmin(AboutJKVo aboutJKVo) {

    System.out.println(aboutJKVo);

    return null;

}

// 7.

@PostMapping("/api/admin/about-JK/edit-JK-text")

public JsonData editAboutJKTextAdmin(@RequestBody AboutJKVo aboutJKVo) {

    System.out.println(aboutJKVo);

    return null;

}

vo

@Data

@AllArgsConstructor

@NoArgsConstructor

public class AboutJKVo implements Serializable {

    private String professionScale;

}

结果

1 和 4 无报错，但为null

1 和 5 success！

1 和 6 无报错，但为null

1 和 7 JSON parse error: Unrecognized token 'aaa'

2 和 4 无报错，但为null

2 和 5 错误的值 professionScale = "professionScale=aaa"

2 和 6 无报错，但为null

2 和 7 JSON parse error: Unrecognized token 'professionScale'

3 和 4 无报错，但为null

3 和 5 错误的值 professionScale = "{"professionScale":"aaa"}"

3 和 6 无报错，但为null

3 和 7 success！