原文地址: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的更多相关文章

  1. 实例操作JSONP原理

    絮语:按这个步骤走,你就会明白JSONP是什么鬼. 1.工程目录: ng-mywork demo.html test.js 2.nginx的server配置 server { listen ; ser ...

  2. angular2系列教程(九)Jsonp、URLSearchParams、中断选择数据流

    大家好,今天我们要讲的是http模块的第二部分,主要学习ng2中Jsonp.URLSearchParams.observable中断选择数据流的用法. 例子

  3. 疯狂的JSONP

    何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...

  4. 通过扩展让ASP.NET Web API支持JSONP

    同源策略(Same Origin Policy)的存在导致了"源"自A的脚本只能操作"同源"页面的DOM,"跨源"操作来源于B的页面将会被拒 ...

  5. 跨域的jsonP

    1.出现原因:因为web中的同源策略(域名,协议,端口号)限制了跨域访问.   2.区别于json (个人理解)json是数据交换格式,jsonp是数据通信中的交互方式   3.jsonp的get与p ...

  6. ASP.NET Web API 配置 JSONP

    之前的一篇博文:jsonp跨域+ashx(示例) 1. 安装 Jsonp 程序集: PM> Install-Package WebApiContrib.Formatting.Jsonp PM&g ...

  7. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  8. 跨域之jsonp

    我们都知道使用<script>标签可以引入外部的JS文件,即使这个JS文件来自于其他的网站,比如我们引用存放在网络服务器上的jQuery框架.在这个过程中,我们已经实现跨域访问.像< ...

  9. 由浅入深学习ajax跨域(JSONP)问题

    什么是跨域?说直白点就是获取别人网站上的内容.但这么说貌似又有点混淆,因为通常我们用ajax+php就可以获取别人网站的内容,来看下面这个例子. 来看看跨域的例子,jquery+ajax是不能跨域请求 ...

  10. JSONP的诞生、原理及应用实例

    问题: 页面中有一个按钮,点击之后会更新网页中的一个盒子的内容. Ajax可以很容易的满足这种无须刷新整个页面就可以实现数据变换的需求. 但是,Ajax有一个缺点,就是他不允许跨域请求资源. 如果我的 ...

随机推荐

  1. "Your local changes to the following files would be overwritten by merge" on git

    运行: git merge --ff origin/master 得到错误信息: error: Your local changes to the following files would be o ...

  2. Open vSwitch FAQ (三)

    Quality of Service (QoS) Q: How do I configure Quality of Service (QoS)? A: Suppose that you want to ...

  3. Linux发展史

    简述 Linux是一套自由加开放源代码的类Unix操作系统,诞生于1991年10月5日(第一次正式向外公布),由芬兰学生Linus Torvalds和后来陆续加入的众多爱好者共同开发完成. Linux ...

  4. ucsc工具集合

    wget http://hgdownload.cse.ucsc.edu/admin/jksrc.zip 解压后所有工具在kent目录里 发现个更方便的.... http://hgdownload.cs ...

  5. ~0u >> 1

    ~ 逐位求反u 后辍为 定义unsigned类型>>右移如在32系统中,连起来就是 将32位的0取反后 右移一位.也就是 int 的最大值 2147482347

  6. poj 1260 dp

    Description In Pearlania everybody is fond of pearls. One company, called The Royal Pearl, produces ...

  7. CrossApp 0.3.1示例编译问题解决过程

    1 AlertTest.h找不到 问题成因:HelloCpp工程中头文件搜索路径没有增加Classes目录,需要自己加进去.(另外由于这些文件都是在子目录中,用递归模式也行,逐个子目录添加也行) 2 ...

  8. hdu3072 强连通+最小树形图

    题意:有一个人他要把一个消息通知到所有人,已知一些通知关系:A 能通知 B,需要花费 v,而又知道,如果某一个小团体,其中的成员相互都能直接或间接通知到,那么他们之间的消息传递是不需要花费的,现在问这 ...

  9. poj1611 带权并查集

    题意:病毒蔓延,现在有 n 个人,其中 0 号被认为可能感染,然后给出多个社交圈,如果某个社交圈里有人被认为可能被感染,那么所有这个社交圈里的人都被认为可能被感染,现在问有多少人可能被感染. 带权并查 ...

  10. CURL学习和应用

    使用PHP的cURL库可以简单和有效地去抓网页.你只需要运行一个脚本,然后分析一下你所抓取的网页,然后就可以以程序的方式得到你想要的数据了.无论是你想从从一个链接上取部分数据,或是取一个XML文件并把 ...