jsonp服务端需要返回的格式: callback([{"id":448,"name":"ddd_xx"}]) 其实就是加个数据的方法调用封装。 注意,对于jsonp在return对象需要为nu
jsonp服务端需要返回的格式:
callback([{"id":448,"name":"ddd_xx"}])
其实就是加个数据的方法调用封装。
注意,对于jsonp在return 对象需要为null,否则返回的数据后面会多个{....},需要返回的数据可以直接PrintWrite输出。
服务端代码示例:
@SuppressWarnings("unchecked")
@JSON(serialize=false)
public String albumList() throws IOException, JSONException {
HttpServletRequest request = this.getRequest();
String userId = request.getParameter("userId");
String callback = request.getParameter("callback");
if(callback == null) callback = "callback";
if (userId == null || "".equals(userId)) {
return null;
}
try {
HashMap<String, Object> param = new HashMap<String, Object>();
param.put("flag", KernelConstants.STATUS_NORMAL);
param.put("createId", userId);
param.put("orderByFlag", "0");
Response response = videoAlbumService.list(param);
List list,result = null;
VideoAlbum videoAlbum = null;
Map map = null;
if ( response.getReturnObject() != null ) {
list = (List<VideoAlbum>) response.getReturnObject();
result = new ArrayList();
for(int i = 0; i<list.size(); i++){
videoAlbum = (VideoAlbum) list.get(i);
map = new HashMap();
map.put("name", videoAlbum.getName());
map.put("id", videoAlbum.getId());
result.add(map);
}
JSONArray jsonObj = JSONArray.fromObject(result);
callback = callback + "(" + jsonObj + ")";
super.renderText(callback);
}
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
接下来就是客户端调用,有两种方法:
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script>
// 一种是ajax
$.ajax( {
url : category,
type : 'GET',
dataType : 'jsonp',
success : function(data) {
var xmlDom=new ActiveXObject("Microsoft.XMLDOM")
xmlDom.loadXML(data) ;
var item_xml = xmlDom.getElementsByTagName("item");
for(var i=0; i<item_xml.length;i++){
jsAddItemToSelect(document.getElementById("sort"),item_xml .firstChild.data,item_xml .getAttribute("Id"));
}
}
});
//一种是简单的封装getJSON
$.getJSON( url ,"callback=?",function(data){
var result = data;
for(var i=0;i<result.length;i++){
jsAddItemToSelect(document.getElementById("issue"),result .name,result .id);
}
});
</script>
这样就实现了跨域调用
这个其实就是在服务端做了一个代理,对于我们没有权限修改的域调用数据,也可以参考此方法,把数据读回来,再传给客户端。
这种方法常用在分布式、异构环境中交换数据使用。但对于不可控制的域调用,需要注意风险,毕竟是脚本注入
callback([{"id":448,"name":"ddd_xx"}])
其实就是加个数据的方法调用封装。
注意,对于jsonp在return 对象需要为null,否则返回的数据后面会多个{....},需要返回的数据可以直接PrintWrite输出。
服务端代码示例:
@SuppressWarnings("unchecked")
@JSON(serialize=false)
public String albumList() throws IOException, JSONException {
HttpServletRequest request = this.getRequest();
String userId = request.getParameter("userId");
String callback = request.getParameter("callback");
if(callback == null) callback = "callback";
if (userId == null || "".equals(userId)) {
return null;
}
try {
HashMap<String, Object> param = new HashMap<String, Object>();
param.put("flag", KernelConstants.STATUS_NORMAL);
param.put("createId", userId);
param.put("orderByFlag", "0");
Response response = videoAlbumService.list(param);
List list,result = null;
VideoAlbum videoAlbum = null;
Map map = null;
if ( response.getReturnObject() != null ) {
list = (List<VideoAlbum>) response.getReturnObject();
result = new ArrayList();
for(int i = 0; i<list.size(); i++){
videoAlbum = (VideoAlbum) list.get(i);
map = new HashMap();
map.put("name", videoAlbum.getName());
map.put("id", videoAlbum.getId());
result.add(map);
}
JSONArray jsonObj = JSONArray.fromObject(result);
callback = callback + "(" + jsonObj + ")";
super.renderText(callback);
}
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
接下来就是客户端调用,有两种方法:
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script>
// 一种是ajax
$.ajax( {
url : category,
type : 'GET',
dataType : 'jsonp',
success : function(data) {
var xmlDom=new ActiveXObject("Microsoft.XMLDOM")
xmlDom.loadXML(data) ;
var item_xml = xmlDom.getElementsByTagName("item");
for(var i=0; i<item_xml.length;i++){
jsAddItemToSelect(document.getElementById("sort"),item_xml .firstChild.data,item_xml .getAttribute("Id"));
}
}
});
//一种是简单的封装getJSON
$.getJSON( url ,"callback=?",function(data){
var result = data;
for(var i=0;i<result.length;i++){
jsAddItemToSelect(document.getElementById("issue"),result .name,result .id);
}
});
</script>
这样就实现了跨域调用
这个其实就是在服务端做了一个代理,对于我们没有权限修改的域调用数据,也可以参考此方法,把数据读回来,再传给客户端。
这种方法常用在分布式、异构环境中交换数据使用。但对于不可控制的域调用,需要注意风险,毕竟是脚本注入