Vue传递数据到后台SpringMVC接收解析返回

最近在自学vue,开始以为跟angular大同小异,但是真正使用的时候发现还是很多不一样的地方,可能是因为刚刚开始理解的还不够深入O(∩_∩)O。 下面说说前端jsp怎么和后台交互,后台使用的是springMvc框架。

html部分

<div id="app">
  <table class="table table-bordered table-striped" style="font-size:12px;">
         <tr>

            <th style="text-align:center;">xxx</th>
            <th style="text-align:center;">xxx</th>
            <th style="text-align:center;">xx</th>
        </tr>
        <tr v-for="e in exceptionList" style="cursor:pointer;">
        </tr>
  </table>
 </div>

js部分,此处需要引入vue-resource库才能使用$http请求,可以用: https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js

$(function(){
    var params = {};
    var vm = new Vue( {
        el: '#app',
        data: {
            currentPage :"1",
            exceptionList : [],
            totalItems: ''
        },
        created: function () {  // created为创建Vue实例后立马执行
            // `this` 指向 vm 实例
           // var pageIndex = 1;
           // params.length = 10;
           // params.start = (pageIndex    -1) * 10;
            // POST请求
            this.$http.post(
                BasePath + "/PriceException/search.do",
                // 请求体重发送的数据
                {length: '10', start : 2},{emulateJSON:true}).then(function (resp) {

                // 请求成功回调
                debugger;
                this.totalItems = resp.data.data.count;
                // this.$set('exceptionList', resp.data.data.posts);
                 this.exceptionList = resp.data.data.posts;
                // this.totalItems = resp.data.count;
            }, function () {
                // 请求失败回调
            });

        }

} );
vm.$watch("currentPage",function(val,oldval){
   alert(val);
})//主动调用$watch方法来进行数据监测</span>
})

java后台部分

@RequestMapping(value = "/search", method= RequestMethod.POST )
@ResponseBody
public Object searchResult(PagenationVo pVo) {

参数pVo对象里面一定要包含js传递过来的属性。

到这里,这样就能实现vue和后台交互了。

PS:在使用过程中,开始怎么都不能把参数传到后台,springMvc的Controller怎么都拿不到值, 一直报错400、415错误,应该是参数解析问题,实验了很久,按上面那种方式终于成功了,汗!
还有因为我是分页功能,需要传入length参数,开始写成:{length: 10, start : 2}也是传不过去这两个参数,搞了很久,后来才知道是因为length:10,这里把它当做10个参数传入了
这里写图片描述

改成:{length: ‘10’, start : 2}就好, 目前还没搞明白为什么会这样,难道是因为vue-resource冲突??

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 10
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值