码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-12-17 12:13:28      阅读:2      评论:0      收藏:0      [点我收藏+]

标签:ast   商品   批量   sage   efi   保存   int   text   cat   

日常踩坑-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接收和传送对象方式不一样。

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

标签:ast   商品   批量   sage   efi   保存   int   text   cat   

原文地址:https://www.cnblogs.com/chenyameng/p/14122764.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!