jsonp获取服务器数据的方式
- 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"}]}
jsonp获取服务器数据的方式的更多相关文章
- XMLHTTPRequestObject获取服务器数据
http://www.educity.cn/develop/526316.html 在Web客户端使用xmlhttp对象,可以十分方便的和服务器交换数据,我们可以获取和发送任何类型的数据,甚至二进制数 ...
- SpringMVC 02: SpringMVC响应get和post请求 + 5种获取前端数据的方式
响应get和post请求 SpringMVC中使用@RequestMapping注解完成对get请求和post请求的响应 项目结构和配置文件与SpringMVC博客集中的"SpringMVC ...
- nodejs获取服务器数据到页面
const Koa = require('koa'); const Router = require('koa-router'); const app = new Koa(); const route ...
- 十一、React 获取服务器数据: axios插件、 fetch-jsonp插件的使用
react获取服务器APi接口的数据: react中没有提供专门的请求数据的模块.但是我们可以使用任何第三方请求数据模块实现请求数据 一.axios 获取Api数据 使用文档:https://www. ...
- 模拟获取post数据的方式
使用下面两种方法可以获取post数据 .通过$HTTP_RAW_POST_DATA获取 $post=$GLOBALS['HTTP_RAW_POST_DATA']; 但需要修改相应的php.ini指令 ...
- IOS开发之Post 方式获取服务器数据
//1.创建post方式的 参数字符串url +(NSString *)createPostURL:(NSMutableDictionary *)params { NSString *postStri ...
- AJAX 跨域请求 - JSONP获取JSON数据
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...
- AJAX 跨域请求的解决办法:使用 JSONP获取JSON数据
由于受到浏览器的限制,ajax不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器 ...
- 【转】AJAX 跨域请求 - JSONP获取JSON数据
来源:http://justcoding.iteye.com/blog/1366102/ Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流 ...
随机推荐
- UML架构(转载)
任何真正的世界系统是由不同的用户使用.用户可以是开发人员,测试人员,商务人士,分析师和等等.所以在设计一个系统的体系结构是用不同的角度心态.最重要的部分是从不同的观看者的角度来看,以可视化的系统.我们 ...
- Git常用命令大全
查看.添加.提交.删除.找回,重置修改文件 git help <command> # 显示command的help git show # 显示某次提交的内容 git show $id gi ...
- javascript 关于函数的返回值
在javascript中根据调用方式的不同返回的内容也不同 1. 以函数的形式调用 当以函数的形式调用时, 返回值和函数定义时的 ruturn 有关, return的是数字就number类型, re ...
- SQL Server 2008连接字符串写法大全{转}
一..NET Framework Data Provider for SQL Server 类型:.NET Framework类库使用:System.Data.SqlClient.SqlConnect ...
- iOS验证码倒计时(GCD实现)
+ (void)verificationCode:(void(^)())blockYes blockNo:(void(^)(id time))blockNo { __block ; //倒计时时间 d ...
- js中几个正则表达式相关函数使用时g标志的作用
首先,javascript中涉及到正则表达式的函数总共有6个,可分为两种: 1.第一种是作为字符串对象的方法,即以 String.fun(); 形式调用,这里包括 split.search.match ...
- 怎样查看Tomcat动态控制台信息
在web项目调试期间,时常需要查看输出的调试信息,例如当hibernate设置为显示SQL语句时,每次运行的SQL语句会输出到终端,另外有时需要在代码中插入一些输出语句,以方便掌握运行情况,但当插入S ...
- 天使投资、VC 以及 PE 的区别是什么?
如果满足于“阶段不同”这个简单的回答,那你可能错过了一个思考资本与企业发展之间关系的机会. 首先要交待一下,在大众语境中,angel/VC/PE三者都可认为是VC,也就是人们常说的风险投资,在国内官方 ...
- Java-马士兵设计模式学习笔记-观察者模式-读取properties文件改成单例模式
一.概述 1.目标:读取properties文件改成单例模式 二.代码 1.Test.java class WakenUpEvent{ private long time; private Strin ...
- Minifilter微过滤框架:框架介绍以及驱动层和应用层的通讯
minifilter是sfilter后微软推出的过滤驱动框架.相比于sfilter,他更容易使用,需要程序员做的编码更简洁. 系统为minifilter专门制作了一个过滤管理器,这个管理器本身其实是一 ...