Ajax和Java后端关于JSON对象字符串数据交互，vue与Java数据交互

需要解决问题：前端JavaScript对象 传递到 Java后端

前端代码如下：

var fac= new Object();

facilities.facCode = "fac9527";
facilities.facType = "社会设施";
facilities.regionCode = "320106";
facilities.facName = "玄武湖";
facilities.facType = "重要建筑";

console.log(typeof facilities);//object类型

var a = JSON.stringify(facilities)
console.log(typeof a)//string类型

var fac = $.toJSON(facilities);//需要添加jquery.json.js
console.log(typeof fac)//string类型 

$.ajax({
   url : $("#cfx").val() + "/admin/testController/testAdd",
   type : "POST",
   dataType : "JSON",
   contentType : "application/json",
   data : a,
   success: function (data) {
      console.log(data)
      console.log(data.status)
   },
   error : function (data) {
      console.log(data)
      console.log(data.status)
   }
})

后端代码如下：

    @CrossOrigin(origins = "*",maxAge = 3600)
    @ResponseBody
    @RequestMapping(value="/facilitiesAdd", method = RequestMethod.POST)
    @SystemControllerLog(operationType= WebConstant.TYPE_GOPAGE, operationName="设施管理新增")
    public OperateResult<Boolean> facilitiesAdd(HttpServletRequest request,@RequestBody Facilities facilitiesInfo){

        logger.info("facilitiesInfo的值："+facilitiesInfo);
        logger.info("getFacilitiesType的值："+facilitiesInfo.getFacilitiesType());
        OperateResult<Boolean> result = null;

        try {
            logger.info("进入设施管理新增");
            
            result = facService.facilitiesAdd(facilitiesInfo);
            
            logger.info("result:"+result);
            logger.info("设施管理新增成功");
        } catch (Exception e) {
            e.printStackTrace();
            logger.error("设施管理新增失败");
        }

        return result;
    }

遇到问题报错清楚如下：

问题1

后端报错信息：Resolved exception caused by Handler execution: org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported

前端报错信息：415

解决：Ajax中添加    contentType : "application/json",

ps：注意大小写，由于contentType  写成 ContentType，也报错

问题2

后端报错信息：Failed to read HTTP message: org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Unrecognized token 'facilitiesInfo': was expecting 'null', 'true', 'false' or NaN; nested exception is com.fasterxml.jackson.core.JsonParseException: Unrecognized token 'facilitiesInfo': was expecting 'null', 'true', 'false' or NaN
 at [Source: java.io.PushbackInputStream@2cce1290; line: 1, column: 16]

前端报错信息：400

解决：把

data : {facilitiesInfo:a}

改成

data : a,// var a = JSON.stringify(facilities)

查询链接：https://blog.csdn.net/qq_36802726/article/details/88419297

https://www.cnblogs.com/ilinuxer/p/6869933.html

问题3 

后端接受问题：刚开始使用

ObjectMapper om = new ObjectMapper();
    
String facilitiesInfo = request.getParameter("facilities");

Facilities facilities = om.readValue(facilitiesInfo,Facilities.class);

这样使用前端要这么写

$.ajax({
            url : $("#cfx").val() + "/admin/testController/testAdd",
            type: "POST",
            data: {
                'facilities': JSON.stringify(facilities)
            },
            dataType: "json",
            success: function (ret) {
                if (ret && ret.Code == "1") {
                    reaffirm("新增成功");
                    window.location.href = "../content/index?mid=4"
                } else {
                    reaffirm("新增失败，请刷新页面重试！")
                    return false
                }
            }
        })

使用情况未添加：contentType : "application/json",

 

以上情况是通过Ajax和Java后端测试交互。

由于实行前后端分离，故vue和Java后端交互情况未知。

续1：（未使用过vue前端框架，表述可能存在问题）2019-08-19

vue和Java后端数据解决方案：

（1）显示的在post请求中定义contentType : "application/json",

（2）传递的参数对象转换成json字符串格式

（3）后端通过@RequestBody获取数据

不明白为什么通过postman或者通过JSP页面去传递参数的时候不需要设置这些，后端也不需要通过@RequestBody去获取数据就能传递参数过去，这种contentType应该是application/x-www-form-urlencoded这样的。

总感觉有点怪怪的，不知道是不是因为接触的太少，准备周末再看看这方面的知识点。

待续.......

感谢查阅过的博客信息。