jsonp get 和 post
原文地址:http://blog.sina.com.cn/s/blog_4a7e719d0100zqzh.html
jsonp获取服务器的数据,有两种
一,跨域
二,不跨域
如果跨域
js的写法有两种
1,
<script type="text/javascript">
$(function() {
$.getJSON('http://localhost:8090/search?jsoncallback=?' ,
function(json) {
alert(json);
var html = "";
for (var key in json.data) {
html = html + "<img src='http://localhost:8090/img/99999/o/" + json.data[key].filename + "'><br>";
html = html + "名称:" + json.data[key].filename + "<br>";
html = html + "category:" + json.data[key].category + "<br>";
html = html + "height:" + json.data[key].height + "<br>";
html = html + "width:" + json.data[key].width + "<br>";
html = html + "length:" + json.data[key].length + "<br>";
html = html + "<hr>";
}
$('#imageList').html(html);
}
);
});
</script>
get的ur后面有jsoncallback=?
这时候,要在服务器端增加如下代码
hr.getParameter("jsoncallback") +"({jsonp数据的格式})"
例子
jQuery1510062266528242707175_1324369820794({"data":[{"category" : "all","height" : "194","_id" : "4ebce7b5523e7e91029f910a","keyword" : "","width" : "259","chunkSize" : "262144","length" : "9082","md5" : "534a94756fc98a6db0483ee702297a82","filename" : "img001_images_029.jpeg","contentType" : "null","uploadDate" : "Fri Nov 11 18:15:33 JST 2011","aliases" : "null"},{"category" : "all","height" : "194","_id" : "4ebce7b5523e7e91029f9108","keyword" : "","width" : "259","chunkSize" : "262144","length" : "10987","md5" : "7b85b894132f78b2b90cd3fef27317a6","filename" : "img001_images_028.jpeg","contentType" : "null","uploadDate" : "Fri Nov 11 18:15:33 JST 2011","aliases" : "null"}]});
注意,是如下格式jQuery1510062266528242707175_1324369820794({xxxx}),要加个()的哦。
2,get的ur后面有jsoncallback=?的写法可以改为get的ur后面有jsoncallback=getdata
同时 function(json) 前要加上getdata=
具体如下
<script type="text/javascript">
$(function() {
$.getJSON('http://localhost:8090/search?jsoncallback=getdata' ,
getdata=function(json) {
alert(json);
var html = "";
for (var key in json.data) {
html = html + "<img src='http://localhost:8090/img/99999/o/" + json.data[key].filename + "'><br>";
html = html + "名称:" + json.data[key].filename + "<br>";
html = html + "category:" + json.data[key].category + "<br>";
html = html + "height:" + json.data[key].height + "<br>";
html = html + "width:" + json.data[key].width + "<br>";
html = html + "length:" + json.data[key].length + "<br>";
html = html + "<hr>";
}
$('#imageList').html(html);
}
);
});
</script>
这个时候,服务器端就不需要加上hr.getParameter("jsoncallback")了,直接返回json格式就行了。
具体参见
http://www.cnblogs.com/5201314/archive/2009/06/23/1509552.html
http://51mst.iteye.com/blog/1170798
二,如果是不跨域的,
不需要加上jsoncallback,直接如下就行了,同时服务器返回的格式,就是纯jsonp的格式。
<script type="text/javascript">
$(function() {
$.getJSON('http://localhost:8090/search' ,
function(json) {
alert(1);
var html = "";
for (var key in json.data) {
html = html + "<img src='http://localhost:8090/img/99999/o/" + json.data[key].filename + "'><br>";
html = html + "名称:" + json.data[key].filename + "<br>";
html = html + "category:" + json.data[key].category + "<br>";
html = html + "height:" + json.data[key].height + "<br>";
html = html + "width:" + json.data[key].width + "<br>";
html = html + "length:" + json.data[key].length + "<br>";
html = html + "<hr>";
}
$('#imageList').html(html);
}
);
});
</script>
服务器返回代码
{"data":[{"category" : "all","height" : "194","_id" : "4ebce7b5523e7e91029f910a","keyword" : "","width" : "259","chunkSize" : "262144","length" : "9082","md5" : "534a94756fc98a6db0483ee702297a82","filename" : "img001_images_029.jpeg","contentType" : "null","uploadDate" : "Fri Nov 11 18:15:33 JST 2011","aliases" : "null"}]}
在wicket中只需要加上如下代码,就可以让不跨域的写法,也可以有跨域的功能。
// response.getHeaders().setHeader("P3P", "CP='CAO PSA OUR'");
// response.getHeaders().setHeader("Access-Control-Allow-Origin", "*");
// response.getHeaders().setHeader("Access-Control-Allow-Headers", "X-Requested-With");
jsonp get 和 post的更多相关文章
- 实例操作JSONP原理
絮语:按这个步骤走,你就会明白JSONP是什么鬼. 1.工程目录: ng-mywork demo.html test.js 2.nginx的server配置 server { listen ; ser ...
- angular2系列教程(九)Jsonp、URLSearchParams、中断选择数据流
大家好,今天我们要讲的是http模块的第二部分,主要学习ng2中Jsonp.URLSearchParams.observable中断选择数据流的用法. 例子
- 疯狂的JSONP
何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...
- 通过扩展让ASP.NET Web API支持JSONP
同源策略(Same Origin Policy)的存在导致了"源"自A的脚本只能操作"同源"页面的DOM,"跨源"操作来源于B的页面将会被拒 ...
- 跨域的jsonP
1.出现原因:因为web中的同源策略(域名,协议,端口号)限制了跨域访问. 2.区别于json (个人理解)json是数据交换格式,jsonp是数据通信中的交互方式 3.jsonp的get与p ...
- ASP.NET Web API 配置 JSONP
之前的一篇博文:jsonp跨域+ashx(示例) 1. 安装 Jsonp 程序集: PM> Install-Package WebApiContrib.Formatting.Jsonp PM&g ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 跨域之jsonp
我们都知道使用<script>标签可以引入外部的JS文件,即使这个JS文件来自于其他的网站,比如我们引用存放在网络服务器上的jQuery框架.在这个过程中,我们已经实现跨域访问.像< ...
- 由浅入深学习ajax跨域(JSONP)问题
什么是跨域?说直白点就是获取别人网站上的内容.但这么说貌似又有点混淆,因为通常我们用ajax+php就可以获取别人网站的内容,来看下面这个例子. 来看看跨域的例子,jquery+ajax是不能跨域请求 ...
- JSONP的诞生、原理及应用实例
问题: 页面中有一个按钮,点击之后会更新网页中的一个盒子的内容. Ajax可以很容易的满足这种无须刷新整个页面就可以实现数据变换的需求. 但是,Ajax有一个缺点,就是他不允许跨域请求资源. 如果我的 ...
随机推荐
- JS操作DOM常用API总结
<JS高程>中的DOM部分写的有些繁琐,还没勇气整理,直到看到了这篇博文 Javascript操作DOM常用API总结,顿时有了一种居高临下,一览全局的感觉.不过有时间还是得自己把书里面的 ...
- PostgreSQL高可用性、负载均衡、复制与集群方案介绍
目录[-] 一.高可用性.负载均衡.复制的几个方案比较: 二.多节点集群方案比较 9.3官方文档(中文):http://58.58.27.50:8079/doc/html/9.3.1_zh/high- ...
- 利用range() 控制循环
s = ['a','b','c','d','e'] for i in range(len(s)):... if i < len(s)-1:... print s[i] a ...
- 推荐!Sublime Text 最佳插件列表
本文由 伯乐在线 - 艾凌风 翻译,黄利民 校稿.英文出处:ipestov.com.欢迎加入翻译组. 本文收录了作者辛苦收集的Sublime Text最佳插件,很全. 最佳的Sublime Text ...
- 使用isInEditMode解决可视化编辑器无法识别自定义控件的问题
如果在自定义控件的构造函数或者其他绘制相关地方使用系统依赖的代码, 会导致可视化编辑器无法报错并提示:Use View.isInEditMode() in your custom views to s ...
- javascript闭包,arguments和prototype
prototype javascript中一切皆对象,并且对象的属性和方法可以任意添加,例如: var obj=function(){}; obj.name="jack"; 但是下 ...
- Linux下编译使用boost库:
Boost是什么不多说, 下面说说怎样在Linux下编译使用Boost的所有模块. 1. 先去Boost官网下载最新的Boost版本, 我下载的是boost_1_56_0版本, 解压. 2. 进入解压 ...
- 对象属性操作-包含kvc---ios
#import <Foundation/Foundation.h> @class Author; @interface Books : NSObject{ @private NSStrin ...
- Andorid面试问题整理
Acitivty的四中启动模式与特点. standard:默认的启动模式 singleTop:适合那种接受通知启动的页面,比如新闻客户端之类的,可能会给你推送好几次 ,但是每次都是打开同一张页面调用o ...
- c# webbrowser 错误捕获
private void Form1_Load(object sender, EventArgs e) { webBrowser1.Url = new Uri("about:blank&qu ...