最近用到了vue,当然也用到了vue中提供的发送ajax请求的函数axious,然后遇到了bug,具体代码如下.
因为的controller拿到数据是将数据统一方到一个返回对象ApiResult里,下面的方法,返回的是一个集合
于是在controller中将数据封装到了对象里,即apiResult.setData(list);但是问题出现了,利用原生态的ajax可以获得数据app.options=result.data();。但是利用axios能获得数据,但是用result点不出方法属性。

axious

 axios.get(this.api.address).then(function (result) {
                 app.addressList=result.data.data; // 正确的取法
                app.addressList=result.data;

                console.log(app.addressList);
            });

ajax请求

$.ajax({
                type:"get",
                url:this.api.address,
                dateType:"json",
                contentType:'application/json',
                success:function(result){
                    app.addressList=result.data;
                    app.options=result.data();
                  console.log(result);
                }
            });

后来查看了返回结果的数据格式
原生态ajax:大家可以看到,我result.data直接就得到了我在controller里封装到apiResult的集合list(数据以”[“开始和结束”]”). 即这里通过result.data得到的就是我的list集合

[ { "childList": [ { "childList": null, "data": { "addressName": "小沛县", "id": 8, "parentId": 1 }, "nodeId": 8, "nodeName": "小沛县", "parentId": 1 }, { "childList": [ { "childList": null, "data": { "addressName": "小沛", "id": 13, "parentId": 9 }, "nodeId": 13, "nodeName": "小沛", "parentId": 9 }, { "childList": null, "data": { "addressName": "德阳县", "id": 14, "parentId": 9 }, "nodeId": 14, "nodeName": "德阳县", "parentId": 9 } ], "data": { "addressName": "零陵郡", "id": 9, "parentId": 1 }, "nodeId": 9, "nodeName": "零陵郡", "parentId": 1 }, { "childList": [ { "childList": null, "data": { "addressName": "北陵镇", "id": 15, "parentId": 10 }, "nodeId": 15, "nodeName": "北陵镇", "parentId": 10 } ], "data": { "addressName": "江夏郡", "id": 10, "parentId": 1 }, "nodeId": 10, "nodeName": "江夏郡", "parentId": 1 }, { "childList": [ { "childList": null, "data": { "addressName": "盱眙县", "id": 16, "parentId": 11 }, "nodeId": 16, "nodeName": "盱眙县", "parentId": 11 } ], "data": { "addressName": "南郡", "id": 11, "parentId": 1 }, "nodeId": 11, "nodeName": "南郡", "parentId": 1 }, { "childList": [ { "childList": null, "data": { "addressName": "吴泽乡", "id": 17, "parentId": 12 }, "nodeId": 17, "nodeName": "吴泽乡", "parentId": 12 } ], "data": { "addressName": "武陵郡", "id": 12, "parentId": 1 }, "nodeId": 12, "nodeName": "武陵郡", "parentId": 1 } ], "data": { "addressName": "荆州", "id": 1, "parentId": 0 }, "nodeId": 1, "nodeName": "荆州", "parentId": 0 }, { "childList": [ { "childList": null, "data": { "addressName": "长山郡", "id": 18, "parentId": 2 }, "nodeId": 18, "nodeName": "长山郡", "parentId": 2 }, { "childList": null, "data": { "addressName": "长沙郡", "id": 19, "parentId": 2 }, "nodeId": 19, "nodeName": "长沙郡", "parentId": 2 } ], "data": { "addressName": "姑苏", "id": 2, "parentId": 0 }, "nodeId": 2, "nodeName": "姑苏", "parentId": 0 }, { "childList": [ { "childList": null, "data": { "addressName": "蜀郡", "id": 20, "parentId": 3 }, "nodeId": 20, "nodeName": "蜀郡", "parentId": 3 } ], "data": { "addressName": "常山", "id": 3, "parentId": 0 }, "nodeId": 3, "nodeName": "常山", "parentId": 0 }, { "childList": null, "data": { "addressName": "汴梁", "id": 4, "parentId": 0 }, "nodeId": 4, "nodeName": "汴梁", "parentId": 0 }, { "childList": null, "data": { "addressName": "朝歌", "id": 5, "parentId": 0 }, "nodeId": 5, "nodeName": "朝歌", "parentId": 0 }, { "childList": null, "data": { "addressName": "昆仑山", "id": 6, "parentId": 0 }, "nodeId": 6, "nodeName": "昆仑山", "parentId": 0 }, { "childList": null, "data": { "addressName": "幽州", "id": 7, "parentId": 0 }, "nodeId": 7, "nodeName": "幽州", "parentId": 0 } ]

axious
大家可以看到result.data得到的是一个json对象(以大括号开始和结束)。但是对象里面又有一个data这个data才是我们封装到apiResult里的。

{ "data": [ { "childList": [ { "childList": null, "data": { "addressName": "小沛县", "id": 8, "parentId": 1 }, "nodeId": 8, "nodeName": "小沛县", "parentId": 1 }, { "childList": [ { "childList": null, "data": { "addressName": "小沛", "id": 13, "parentId": 9 }, "nodeId": 13, "nodeName": "小沛", "parentId": 9 }, { "childList": null, "data": { "addressName": "德阳县", "id": 14, "parentId": 9 }, "nodeId": 14, "nodeName": "德阳县", "parentId": 9 } ], "data": { "addressName": "零陵郡", "id": 9, "parentId": 1 }, "nodeId": 9, "nodeName": "零陵郡", "parentId": 1 }, { "childList": [ { "childList": null, "data": { "addressName": "北陵镇", "id": 15, "parentId": 10 }, "nodeId": 15, "nodeName": "北陵镇", "parentId": 10 } ], "data": { "addressName": "江夏郡", "id": 10, "parentId": 1 }, "nodeId": 10, "nodeName": "江夏郡", "parentId": 1 }, { "childList": [ { "childList": null, "data": { "addressName": "盱眙县", "id": 16, "parentId": 11 }, "nodeId": 16, "nodeName": "盱眙县", "parentId": 11 } ], "data": { "addressName": "南郡", "id": 11, "parentId": 1 }, "nodeId": 11, "nodeName": "南郡", "parentId": 1 }, { "childList": [ { "childList": null, "data": { "addressName": "吴泽乡", "id": 17, "parentId": 12 }, "nodeId": 17, "nodeName": "吴泽乡", "parentId": 12 } ], "data": { "addressName": "武陵郡", "id": 12, "parentId": 1 }, "nodeId": 12, "nodeName": "武陵郡", "parentId": 1 } ], "data": { "addressName": "荆州", "id": 1, "parentId": 0 }, "nodeId": 1, "nodeName": "荆州", "parentId": 0 }, { "childList": [ { "childList": null, "data": { "addressName": "长山郡", "id": 18, "parentId": 2 }, "nodeId": 18, "nodeName": "长山郡", "parentId": 2 }, { "childList": null, "data": { "addressName": "长沙郡", "id": 19, "parentId": 2 }, "nodeId": 19, "nodeName": "长沙郡", "parentId": 2 } ], "data": { "addressName": "姑苏", "id": 2, "parentId": 0 }, "nodeId": 2, "nodeName": "姑苏", "parentId": 0 }, { "childList": [ { "childList": null, "data": { "addressName": "蜀郡", "id": 20, "parentId": 3 }, "nodeId": 20, "nodeName": "蜀郡", "parentId": 3 } ], "data": { "addressName": "常山", "id": 3, "parentId": 0 }, "nodeId": 3, "nodeName": "常山", "parentId": 0 }, { "childList": null, "data": { "addressName": "汴梁", "id": 4, "parentId": 0 }, "nodeId": 4, "nodeName": "汴梁", "parentId": 0 }, { "childList": null, "data": { "addressName": "朝歌", "id": 5, "parentId": 0 }, "nodeId": 5, "nodeName": "朝歌", "parentId": 0 }, { "childList": null, "data": { "addressName": "昆仑山", "id": 6, "parentId": 0 }, "nodeId": 6, "nodeName": "昆仑山", "parentId": 0 }, { "childList": null, "data": { "addressName": "幽州", "id": 7, "parentId": 0 }, "nodeId": 7, "nodeName": "幽州", "parentId": 0 } ], "message": "success", "success": true }

总结:原生态的ajax的返回结果直接就是我们在controller中返回的结果,即,下面的回调函数里的result就等于我们返回的结果。
例,我在controller里面将apiResult返回了,那么在前端拿到的result就是返回结果。
但是axious是vue又给我们封装了一层,即,用vue发送请求并得到的result是vue自己封装的对象,在我们的返回值上又封装了一层,它把我们返回的结果统统放到他自己定义的result的一个data属性里面,即result.data这个才是我们在controller中返回的结果apiResult对象,然后我们要想拿到对象的集合的再点一次即result.data.data。第二个data是我自己宰apiResult中封装的数据集。

$.ajax({
                type:"get",
                url:this.api.address,
                dateType:"json",
                contentType:'application/json',
                success:function(result){
                    app.addressList=result.data;
                    app.options=result.data();
                  console.log(result);
                }
            });
Logo

前往低代码交流专区

更多推荐