日常踩坑-jquery的ajax映射json问题

日常踩坑-jquery的ajax映射json问题

背景：

觉得写项目一直采用自己熟悉的写法，终究会停步不前，以前经常使用$.post()的方式向后端传输数据，这次洋气点，使用ajax，但是问题就出来了。

问题

$.ajax({
    url: "/****/****/****/save",
    type: "POST",
    data: JSON.stringify(backProduct),
    contentType: "application/json;charset=UTF-8",
    dataType: "text",
    success: function (resp) {
        if (resp.data) {
            toastr.success(resp.message, "提示");
            setTimeout(function (){
                location.reload()
            },2000)
        } else {
            toastr.error(resp.message, '提示')
        }
    }
});

后台代码

/**
 * 保存一个商品到数据库中
 * @return flag
 */
@RequestMapping(value = "/save", method = RequestMethod.POST)
@ResponseBody
public ResultDTO<Boolean> save(@RequestBody AdminBproductDto adminBproductDto) {
    final Bproduct bproduct = new Bproduct();
    BeanUtils.copyProperties(adminBproductDto,bproduct);
    final boolean save = bproductService.save(bproduct);
    //批量保存尺寸外键
    final Integer[] bsizeId = adminBproductDto.getBsizeId();
    final List<BproSize> collect = Arrays.stream(bsizeId).map(sizeId -> {
        final BproSize bproSize = new BproSize();
        bproSize.setBsizeId(sizeId);
        bproSize.setBproId(bproduct.getBproId());
        return bproSize;
    }).collect(Collectors.toList());
    bproSizeService.saveBatch(collect);
    return super.successSaveInfo(save);
}

先说出现的错误，我已经保存成功了，然后返回的实体信息应该如下：

{code：1000,message:保存成功，data:true}

大概返回的json数据是这样的吧，凑合着看。像往常我使用post向后端传输数据使用的上述js代码，在resp.data处直接报undefined错误。因为js识别不出来resp.data的类型。

---

解决

当保存成功后，后端想前台传输结果对象，但是只是一个后端的对象，需要将传输过来的对象进行映射成为JSON对象，具体做法如下：

$.ajax({
    url: "/admin/info/product/save",
    type: "POST",
    data: JSON.stringify(backProduct),
    contentType: "application/json;charset=UTF-8",
    dataType: "text",
    success: function (resp) {
        let parse = JSON.parse(resp)
        if (parse.data) {
            toastr.success(parse.message, "提示");
            setTimeout(function (){
                location.reload()
            },2000)
        } else {
            toastr.error(parse.message, '提示')
        }
    }
});

JSON.parse(resp)是将resp转换为js的对象（将后台传输过来的对象转换为js可以识别的对象），然后就可以使用了。

---

另外需要提醒的坑位：

1. 如果使用ajax向后端传输数据的话，必须制定内容类型，也就是上述的contentType，要不然后台直接报解析错误。、
2. 向后台传输数据的时候，如果传输的是一个对象，应该用JSON.stringify(backProduct)，要不然也会报错。
3. $.post和 $.ajax接收和传送对象方式不一样。