您的位置:首页 > Web前端 > JavaScript

JsonP的使用

2017-01-02 16:06 225 查看
项目中遇到跨域请求的,很多情况会用到jsonp请求。

1.jsonp请求,首先是利用JQuery中的ajax异步请求,要求:请求地址,类型,数据类型等参数

2.前台js要定义jsonp方法的回调函数名

$.ajax({
   url: 'https://**********.cn/util/news/getNews.htm?jsoncallback=funckNews',
   type: "post",
   dataType:'JSONP',
   jsonp:'jsonpcallback',
   jsonpCallback:"funckNews",
   cache:true,
   success: function(data){
if(data.length > 2){
data = $.parseJSON(data); 
var datas = {"data":data , "showMore" : data.length == 7};
var output = Mustache.render($(".J_news_list_tpl").val(), datas);
$('#listbody').append(output);
} else {
$('#listBody').append("<span><font style='color:#f00;font-size:26px;'>暂无通知公告!</font></span>");
}
   }
});

3.定义Java后台接受请求处理方法

/**
* 获取最新系统通知
* @return
*/
@ResponseBody
@RequestMapping(value = "getNews",produces="text/html;charset=UTF-8;")
public JSONPObject getNews(HttpServletRequest request) {
String callBackMethod = request.getParameter("jsoncallback");
if (callBackMethod == null) {
callBackMethod = "";
}
NewsQueryDTO query = new NewsQueryDTO();
Page page = new Page();
page.setPageSize(7);
query.setIssueStatus(NewsDO.IS_ISSUESTATUS);//已发布
query.addSortField("top").setDesc();//置顶倒序
query.addSortField("createdOn").setDesc();//创建时间倒序
List<NewsDO> newsList = newsService.queryList(query, page);

if (CollectionUtils.isNotEmpty(newsList)) {
for (NewsDO news : newsList) {
news.setDateTime(DateUtils.format(news.getIssueTime(), DateUtils.SHORT_DATE_PATTERN));
}
}

//获取符合条件的数据
if (newsList != null) {
return  new JSONPObject(callBackMethod , JsonUtils.listToJSONString(newsList));
} else {
return  new JSONPObject(callBackMethod , null);
}
}

4.返回的格式为方法名+jsonArray数组字符串

funckNews("[{\"nId\":8,\"newsType\":1,\"title\":\"杭州师范大学考点报考须知\",\"top\":2,\"issueStatus\":1,\"issueTime\":\"Dec 30, 2016 8:55:38 PM\",\"des\":\"在杭州师范大学考点选择报考外省院校专业校考的浙江省考生请使用电脑登陆https://www.artstudent.cn报名;如果自主使用手机APP报名,产生的肖像审核费用与考点无关。
\\r\\n\\r\\n\\r\\n\\t 浙江省外考生选择在杭州师范大学参加相应院校专业考试的,请按照报名系统的相关要求,办理报名手续。\",\"dateTime\":\"2016-12-30\",\"createdBy\":1217424,\"createdOn\":\"Dec 30, 2016 8:55:38 PM\",\"modifiedBy\":1226493,\"modifiedOn\":\"Jan 1, 2017 12:37:29 AM\",\"isDeleted\":false},{\"nId\":7,\"newsType\":1,\"title\":\"浙江考生看过来!杭州师范大学考点已经陆续开通部分院校的报名,有心仪院校的考生可以选报咯!\",\"top\":2,\"issueStatus\":1,\"issueTime\":\"Dec
30, 2016 9:38:07 AM\",\"des\":\"2017年省外高校艺术类专业校考安排表(杭州师范大学考点) \\r\\n\\t\\t\\t\\t\\r\\n\\t\\t\\t\\r\\n\\t\\t\\r\\n\\t\\t\\r\\n\\t\\t\\t\\r\\n\\t\\t\\t\\t\\r\\n\\t\\t\\t\\t\\t序号 \\r\\n\\t\\t\\t\\t\\r\\n\\t\\t\\t\\r\\n\\t\\t\\t\\r\\n\\t\\t\\t\\t\\r\\n\\t\\t\\t\\t\\t专业校考院校
\\r\\n\\t\\t\\t\\t\\r\\n\\t\\t\\t\\r\\n\\t\\t\\t\\r\\n\\t\\t\\t\\t\\r\\n\\t\\t\\t\\t\\t报名时间和方式 \\r\\n\\t\\t\\t\\t\\r\\n\\t\\t\\t\\r\\n\\t\\t\\t\\r\\n\\t\\t\\t\\t\\r\\n\\t\\t\\t\\t\\t考试时间 \\r\\n\\t\\t\\t\\t\\r\\n\\t\\t\\t\\r\\n\\t\\t\\t\\r\\n\\t\\t\\t\\t\\r\\n\\t\\t\\t\\t\\t考试类别或专业
\\r\\n\\t\\t\\t\\t\\r\\n\\t\\t\\t\\r\\n\\t\\t\\t\\r\\n\\t\\t\\t\\t\\r\\n\\t\\t\\t\\t\\t院校咨询电话 \",\"dateTime\":\"2016-12-30\",\"createdBy\":1217374,\"createdOn\":\"Dec 30, 2016 9:38:07 AM\",\"modifiedBy\":1226493,\"modifiedOn\":\"Dec 30, 2016 8:48:13 PM\",\"isDeleted\":false},{\"nId\":4,\"newsType\":2,\"schoolId\":10209,\"title\":\"报考吉林艺术学院考生必看!!!\",\"top\":2,\"issueStatus\":1,\"issueTime\":\"Dec
23, 2016 2:47:26 PM\",\"des\":\"2017年,来吉林艺术学院参加考试的学生(含吉林省考生)报考程序分为网上报名与交费、现场确认两个环节。未进行网上报名和缴费、未确认或确认时手续不全的视为报考不成功,不能参加考试,后果由本人自行承担。在外省考点参加考试的考生,按外省考点的要求进行报名(不适用以下环节)。 \\r\\n\\r\\n\\r\\n\\t一、报名环节 \\r\\n\\r\\n\\r\\n\\t1、来吉林艺术学院参加考试的学生(含吉林省考生),可登录吉林艺术学院网站或艺考升https://www.artstudent.cn,参照《2017年吉林考区专业考试网上报名操作说明》,按照\",\"dateTime\":\"2016-12-23\",\"createdBy\":1227467,\"createdOn\":\"Dec
23, 2016 2:47:26 PM\",\"modifiedBy\":1193345,\"modifiedOn\":\"Dec 30, 2016 4:53:19 PM\",\"isDeleted\":false},{\"nId\":3,\"newsType\":1,\"title\":\"云艺、云统考报名发布\",\"top\":2,\"issueStatus\":1,\"issueTime\":\"Dec 19, 2016 10:08:17 AM\",\"des\":\"云南艺术统考和云南艺术学院已经在本平台开通报名,欢迎广大考生报考!(仅限云南省考生)\",\"dateTime\":\"2016-12-19\",\"createdBy\":1031532,\"createdOn\":\"Dec
19, 2016 10:08:17 AM\",\"modifiedBy\":1031532,\"modifiedOn\":\"Dec 19, 2016 10:08:17 AM\",\"isDeleted\":false},{\"nId\":2,\"newsType\":1,\"title\":\"系统维护公告\",\"top\":2,\"issueStatus\":1,\"issueTime\":\"Dec 8, 2016 9:10:36 PM\",\"des\":\"艺考报名系统将于晚上24:00至次日06:00进行升级维护,维护期间网站将暂停对外服务。由此给您带来的不便敬请谅解,并请您提前做好相关安排。\",\"dateTime\":\"2016-12-08\",\"createdBy\":100,\"createdOn\":\"Dec
8, 2016 9:10:36 PM\",\"modifiedBy\":100,\"modifiedOn\":\"Dec 19, 2016 9:37:53 AM\",\"isDeleted\":false}]")

喜欢的朋友可以扫描我的个人公众号,有好东西可以一起分享
4000


也可以微信搜索公众号:Java程序员那些事

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: