前端vue跨域请求,后端是ssm处理该请求并且返回数据

无敌的宇宙
无敌的宇宙
擅长邻域:Java,HTML,JavaScript,MySQL,支付,退款,图片上传

分类: Java 标签: vue跨域请求 ssm处理跨域请求并且返回数据 ssm怎么返回跨域请求的数据

2020-10-15 19:34:02 1401浏览

前端使用vue发起跨域请求,后端是ssm框架写的,已经成功接收到vue发过来的请求了,但是返回值前端一直接收不到??这是怎么回事呢,想想应该是跨域请求和非跨域的请求的返回值类型不一样,最后终于解决了这个问题,直接上代码。
前端使用vue发起跨域请求,后端是ssm框架写的,已经成功接收到vue发过来的请求了,但是返回值前端一直接收不到??这是怎么回事呢,想想应该是跨域请求和非跨域的请求的返回值类型不一样,最后终于解决了这个问题,直接上代码。
引入插件
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

前端代码:
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><img src="img/logo.png" alt="logo"></div>
<div class="form_group">
<input type="text" v-model="title" @keyup.enter="searcher()" class="input_txt" placeholder="请输入查询的试题内容"/>
<button class="input_sub" @click="searcher()" type="button" >搜索</button>




</div><br/><br/>
<div v-for="item in list_">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">
问题 {{item.type==1010?'单选':''}}{{item.type==1020?'多选':''}}{{item.type==1030?'判断':''}}
</h4>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">
{{item.id}}、{{item.title}}
</h4>
</a>
</div>

<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">
答案
</h4>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">
{{item.answer}}
</h4>
</a>
</div>
</div>
</div>
</div>
vue ajax get
window.onload = function(){
var vm = new Vue({
el:'#app',
data:{
list_:[],
title:''
},
methods:{
searcher:function(){

this.list_=[];
//发送get请求
this.$http.get('http://qing.free.idcfengye.com/index/param?title='+this.title,{},{emulateJSON:true}).then(function(res){
console.log(res.body);
var d=res.body;
if(d.code==200){
if(d.data.length==0)alert('没有搜到~');
this.list_=d.data;

}else{

alert('请求失败,请重试');

}
},function(){

alert('请求失败,请检查网络');
});
}
}
});
}
vue 跨域
window.onload = function () {
new Vue({
el: '#app',
data: {
list_:[],
title:''
},
methods: {
searcher() {
let url = 'http://qing.free.idcfengye.com/index/param';
this.$http.jsonp(url, {
params: {
title:this.title
},
jsonp: 'cb'//jsonp默认是callback,百度缩写成了cb,所以需要指定下 }
}).then(res => {
if(res.body.length==0)alert('没有数据。。');
this.list_=res.body;

}).catch(err => {
console.log("------------------error----------");
  console.log(err)
});
}
}
});
}
ssm后台返回jsonp格式的数据,注意cb

引入包 import org.codehaus.jackson.map.util.JSONPObject; 否则没有返回值
@ResponseBody
@RequestMapping("/page")
public JSONPObject page(@RequestParam(value="pageNo",defaultValue="1")int pageNo,HttpServletRequest request, HttpServletResponse response,HttpSession session,
Model model,ACmg o,String cb) throws IOException {
PageHelper.startPage(pageNo,Sys.Common.pageSize," cts desc ");
List<ACmg> li=cmgService.queryList(o);
PageInfo<ACmg> pageInfo = new PageInfo<ACmg>(li,Sys.Common.pageSize);
model.addAttribute("pageInfo", pageInfo);
model.addAttribute("o", o);


JSONPObject j=new JSONPObject(cb, pageInfo);
return j;

}


好博客就要一起分享哦!分享海报

此处可发布评论

评论(0展开评论

暂无评论,快来写一下吧

展开评论

您可能感兴趣的博客

客服QQ 1913284695