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有一个缺点,就是他不允许跨域请求资源. 如果我的 ...
随机推荐
- Pike的安装(Ubuntu环境)
本机环境: Ubuntu 14.04 安装:sudo apt-get install pike7.8-dev 或者: sudo apt-get install pike7.8 官网下载源码 获取git ...
- PAT (Basic Level) Practise:1027. 打印沙漏
[题目链接] 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打印 ***** *** * *** ***** 所谓“沙漏形状”,是指每行输出奇数个符号:各行符号中 ...
- 关于环境变量PATH的几点注意事项
查看执行文件路径变量PATH的内容可用echo $PATH.echo表示显示打印之意,$表示后接的是变量. 如下图所示,其中每个目录中间用冒号(:)来隔开,每个目录是有顺序之分的: 如果预修改PATH ...
- Mac中Fn键技巧
此文适用:Mac自带苹果键盘或外接有Fn键的普通键盘 上一页=Fn+⬅️ 下一页=Fn+➡️ 向上卷动=Fn+⬆️ 向下卷动=Fn+⬇️
- MySQL常用配置
查看MySQL的参数信息 mysql> show variables; 查看key_buffer_size的使用情况 mysql> show status like 'key_read%' ...
- phpwind将服务器数据同步到本地之后网站不显示或者排版错误
在将phpwind的数据同步到本地服务器之后 如果访问本地服务器的首页不能显示的话 首先要查看global.php文件中的D_P变量,官方默认 的此变量应该指向和R_P变量是同一个文件夹即网站的根目录 ...
- JS数组随机排序
var arr=[1,2,3,4,5]; arr.sort(function(a,b){ var v=Math.random()>0.5?1:-1; console.log(a,b,v); re ...
- 黑马程序员——JAVA基础之泛型和通配符
------- android培训.java培训.期待与您交流! ---------- 泛型: JDK1.5版本以后出现新特性.用于解决安全问题,是一个类型安全机制. 泛型好处: ...
- java DecimalFormat
public class Test{ public static void main(String[] args) throws Exception{ /*DecimalFormat参数,如果是0则会 ...
- 多网卡 指定网卡到指定IP
route add -net 1.2.3.0/24 gw 网关 route add -host 目标IP dev eth1route add -host 目标IP gw 网关