使用JSONP解决跨域问题-代码示例

前段时间用JSONP解决了跨域问题,现在不用了,把代码思路记下来,今后说不定还用得上。

JS代码

//查询公告数据

function recentpost(){

$.getJSON(cmsUrl+"/post/recentpost.json?jsoncallback=?",{count:count,categoryid:categoryid}, function(data){

//

});

}

JS代码,主要就是使用jquery的getJSON方法。

更多描述,来自jquery 文档。

jQuery.getJSON(url, [data], [callback])

概述

通过 HTTP GET 请求载入 JSON 数据。

在 jQuery 1.2 中,您可以通过使用JSONP形式的回调函数来加载其他网域的JSON数据,如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。 注意:此行以后的代码将在这个回调函数执行前执行。

参数

url,[data],[callback]String,Map,FunctionV1.0

url:发送请求地址。

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

示例

描述:

从 Flickr JSONP API 载入 4 张最新的关于猫的图片。

HTML 代码:
<div id="images"></div>
jQuery 代码:
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format
=json&jsoncallback=?", function(data){
  $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo("#images");
    if ( i == 3 ) return false;
  });
});

描述:

从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据。

jQuery 代码:
$.getJSON("test.js", function(json){
  alert("JSON Data: " + json.users[3].name);
});

描述:

从 test.js 载入 JSON 数据,附加参数,显示 JSON 数据中一个 name 字段数据。

jQuery 代码:
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
  alert("JSON Data: " + json.users[3].name);
});

Java代码

@RequestMapping(value = "recentpost")
public void recentPost(Integer categoryid, String jsoncallback,
Integer count, Model model, HttpServletResponse response) {
if (categoryid == null) {
categoryid = DEFAULT_CATEGORY;
}
List<Post> list = postService.listRecent(categoryid, count);
// JSONObject json = new JSONObject();
// json.put("list", list);
// String str=json.toJSONString();
// model.addAttribute("callback", list);
String str = JSONObject.toJSONString(list);
str = jsoncallback + "(" + str + ")";
super.returnMessage(response, str);
}

使用JSON库,把jsonp格式的字符串发送到前端。记得函数名称jsoncallback这个参数。

时间: 2024-12-21 01:24:07

使用JSONP解决跨域问题-代码示例的相关文章

JSONP解决跨域问题,防止表单重复提交,防止XSS攻击

一.跨域问题:能够正常请求,但是没有办法获取到响应结果 解决方案一:设置请求头,在请求的资源中设置Access-Control-Allow-Origin请求头 //3.设置请求头 response.setHeader("Access-Control-Allow-Origin", "*"); 二.JSONP解决跨域问题 普通的跨域访问问题,浏览器会进行拦截,凡是src属性的都不会拦截 ajax:http://www.a.com:8080/a/AServlet JSON

Django 【第十九篇】JS实现的ajax、同源策略和前端jsonp解决跨域问题

一.回顾jQuery实现的ajax 首先说一下ajax的优缺点 优点: AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高: jquery 实现的ajax index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

详解Jquery和AngularJs,Servlet中jsonp解决跨域问题(转)

众所周知,jsonp可以解决跨域问题,下面是我在查阅资料和实际项目使用后的一些总结. Jquery中jsonp的使用 //myUrl = "http://localhost:8090/api/test"; $.ajax({ type:"GET", url:myUrl, dataType:"jsonp", jsonp:"callback", jsonpCallback:"jsonpCallback", suc

解决跨域问题代码

此代码主要是为了解决跨域问题: 代码: import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationS

非jsonp解决跨域问题

1.服务器端解决跨域问题:配置filter在filter中设置请求头import java.io.IOException; import javax.servlet.Filter;import javax.servlet.FilterChain;import javax.servlet.FilterConfig;import javax.servlet.ServletException;import javax.servlet.ServletRequest;import javax.servle

学习 jsonp 解决跨域

转载自http://www.cnblogs.com/qyf404/p/3868611.html 1.起因 js脚本做ajax异步调用的时候,直接请求普通文件存在跨域无权限访问的问题,不管你是静态页面.动态网页.web服务,只要是跨域请求,都无法成功: 如果上句话没明白,我们直接看例子.有两个一模一样的项目,一个webApp01,一个webApp02,分别在两个tomcat里启动,一个端口是8080,一个端口是9080.即两个访问地址是 http://localhost:8080/webApp01

深入理解jsonp解决跨域访问

在我们做的这个项目中充分利用jsonp跨域这一个特性,完成了简单的单点登录功能和权限统一认证控制,实现思路并不复杂同各种实现单点登录的产品相比可以说微不足道,各有各的好处.各有各的优点,选择什么方式实现完全取决于我们自己或者项目经理的开发经验,对各种框架的理解程度往往决定了目前开发项目的整体架构. 这不是一项凭空产生的新东西,仅仅是JS的一个特性而已之前没有被我们提及也没有被我们注意到原来经常使用的js还可以跨域呢,觉的我们对已经学过的东西理解还不是不够深入.有些肤浅,JS绝大多数在浏览器中运行

深入了解jsonp解决跨域访问

在这个项目中,我们做的充分利用jsonp这是一个特点跨界,完成简单的单点登录认证和权限控制的统一.道,各有各的优点.各有各的优点,选择什么方式实现全然取决于我们自己或者项目经理的开发经验,对各种框架的理解程度往往决定了眼下开发项目的总体架构. 这不是一项凭空产生的新东西.不过JS的一个特性而已之前没有被我们提及也没有被我们注意到原来常常使用的js还能够跨域呢,觉的我们对已经学过的东西理解还不是不够深入.有些肤浅,JS绝大多数在浏览器中执行完毕各种动态效果,开发js的人一開始应该就考虑到了浏览器的

Jsonp 解决跨域问题

话不多说直接贴代码: $.ajax({ async: false, url: 'http://****.****.com/Handler.ashx?vueId=iwNavpicS2', type: "GET", dataType: 'jsonp', jsonp: 'jsoncallback', data: null, timeout: 5000, beforeSend: function () { //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,