原文地址: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. Java ArrayList的使用方法

    首先ArrayList的一个简单实例: package chapter11; import java.util.ArrayList; public class TestArrayList { publ ...

  2. Java自带的keytool命令

    使用Java自带的keytool命令,在命令行生成. 1.生成服务器端私钥kserver.keystore文件 keytool -genkey -alias serverkey -validity 1 ...

  3. man page的介绍

    假设你知道一个命令名,但不知其使用方法,此时可以求助于在线求助系统,即使用man(manual)命令,如man date. 上图为执行man date语句后的结果.<翻页查看时可按空格键,退出m ...

  4. 268. Missing Number

    Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missin ...

  5. java的加减乘除

    //编写一个程序,用户输入两个数,求出其加减乘除,并用消息框显示计算结果.//MengYao,2015,10,6 import javax.swing.JOptionPane;public class ...

  6. Date 对象总结

    Date对象,是操作日期和时间的对象.Date对象对日期和时间的操作只能通过方法. 无参数: var date=new Date(); console.log(date)     // Mon Jun ...

  7. Roman to Integer

    Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from 1 t ...

  8. ubuntu14.04 and ros indigo install kinect driver--16

    摘要: 原创博客:转载请表明出处:http://www.cnblogs.com/zxouxuewei/ 今日多次测设ros indigo install kinect driver ,提示各种失败,然 ...

  9. UVa 442 矩阵链乘(栈)

    Input Specification Input consists of two parts: a list of matrices and a list of expressions. The f ...

  10. MySQL复制的基本概念和实现

    MySQL的复制的概念是完成水平扩展的架构 MySQL性能方面的扩展方式有scale on(向上扩展,垂直扩展)                          scale out(向外扩展,水平扩 ...