原文地址: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. postgresql存储二进制大数据文件

    如果想把整个文件或图片存储在数据表的一个字段内,该字段可以选择二进制类型,然后将文件按二进制存储起来,文本文件也可以存在text字段内. 示例如下: 二进制类型bytea的操作(在最大值内,有内存限制 ...

  2. 2016 ACM/ICPC Asia Regional Dalian Online 1002/HDU 5869

    Different GCD Subarray Query Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K ( ...

  3. Matlab GUI设计中的一些常用函数

    Matlab GUI常用函数总结 % — 文件的打开.读取和关闭% — 文件的保存% — 创建一个进度条% — 在名为display的axes显示图像,然后关闭% — 把数字转化为时间格式% — ch ...

  4. jq hover方法用法 例子

    <script type="text/javascript">    $(function(){        $('.caseslist').hover(functi ...

  5. webStorm快捷键总结

    Ctrl+Shift+a:快速查找使用编辑器所有功能1.左侧栏目录显影:Ctrl+Shift+F122.文件模板配置:File>Settings>Editor>File and Co ...

  6. ArrayList笔记

    elementData是一个缓存数组,它通常会预留一些容量,等容量不足时再扩充容量,这个楼主一定是明白的,不用多解释.假如现在实际有了5个元素,而elementData的大小可能是10,那么在序列化时 ...

  7. Spring MVC数组绑定

    需求:商品批量删除,用户在页面选择多个商品,批量删除. 关键:将页面选择(多选)的商品id,传到controller方法的形参,方法形参使用数组接收页面请求的多个商品id // 批量删除 商品信息 @ ...

  8. phpmyadmin使用中碰到的一些问题

    在导入数据库文件的时候出现 #1062 – Duplicate entry '1′ for key ‘PRIMARY' 说明在上一次的导入中没有完全导入,但是主键是自增的,所以要输入主键才能继续,解决 ...

  9. HDU-4533 威威猫系列故事——晒被子(区间更新)

    题目大意:在平面直角坐标系的第一象限中,给出n个矩形(可能重叠).有m次询问,每次询问点(t,t)的左下方的正方形区域中矩形的总面积(重叠部分重叠几次就得统计几次). 题目分析:线段树的叶子节点x维护 ...

  10. Linux常用配置文件解析

    网络相关配置文件 1./etc/sysconfig/network-scripts/ifcfg-ethx 网络参数IP/子网掩码/广播地址等的配置(重启有效) 2./etc/resolv.conf   ...