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有一个缺点,就是他不允许跨域请求资源. 如果我的 ...
随机推荐
- Java 内部类和匿名类 实现JButton动作 ActionListener类
import javax.swing.*; import java.awt.*; import java.awt.event.*; public class ControlCircle2 extend ...
- iOS中动画的简单使用
iOS中的动画右两大类1.UIView的视图动画2.Layer的动画 UIView的动画也是基于Layer的动画动画的代码格式都很固定 1.UIView动画 一般方式[UIView beginAnim ...
- Spring学习笔记--spring+mybatis集成
前言: 技术的发展, 真的是日新月异. 作为javaer, 都不约而同地抛弃裸写jdbc代码, 而用各种持久化框架. 从hibernate, Spring的JDBCTemplate, 到ibatis, ...
- C# 托管资源和非托管资源
托管资源指的是.NET可以自动进行回收的资源,主要是指托管堆上分配的内存资源.托管资源的回收工作是不需要人工干预的,有.NET运行库在合适调用垃圾回收器进行回收. 非托管资源指的是.NET不知道如何回 ...
- 用java将excel表格中的内容修改后写入到另一个excel中
package nn; import java.io.File; import jxl.Cell; import jxl.Sheet; import jxl.Workbook; import jxl. ...
- call & apply
对于apply和call两者在作用上是相同的:这两个方法通常被用来类的继承和回调函数.但两者在参数上有区别的.call函数和apply方法的第一个参数都是要传入给当前对象的对象,及函数内部的this. ...
- Apache脚本路径别名(CGI接口)
CGI:Common Gateway Interface(通用网关接口)使WEB可以跟一个应用程序进行通信,从通信环境中获得结果. CGI是不安全的,需要mod_alias,mod_cgi模块 Scr ...
- LeetCode(228) Summary Ranges
Given a sorted integer array without duplicates, return the summary of its ranges. For example, give ...
- 牧场安排(usaco NOV06.cowfood)
ohn新买了一块长方形的牧场,这块牧场被划分成M列N行(1<=M<=12; 1<=N<=12),每一格都是一块正方形的土地.FJ打算在牧场上的某几格土地里种上美味的草,供他的奶 ...
- Linux-NFS原理介绍
NFS(network filesystem)是由sun公司开发的,其作用是在网络当中可以将想要开发的目录共享给别人,这样使得访问者访问nfs服务器上的东西就像访问本地的文件一样,在将文件公开给别人的 ...