ajax前后台通信验错

目录

• 默认contenType下
  • 总结以下例证：
  • 1.当为简单JSON时
    • ajax
    • controller
    • vo
  • 2.当为复杂JSON的时候
    • ajax
    • controller
    • vo
    • 结果
• contentType为application/json时
  • 总结以下例证
  • 1.restful风格下传递复杂json
    • ajax
    • controller
    • vo
    • 结果
  • 2.restful风格下传递简单json
    • ajax
    • controller
    • vo
    • 结果
  • 3.restful风格下传递list
    • ajax
    • controller
    • vo
    • 结果
  • 4.restful下传递单参
    • ajax
    • controller
    • vo
    • 结果

默认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！