• 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获取服务器数据的方式的更多相关文章

  1. XMLHTTPRequestObject获取服务器数据

    http://www.educity.cn/develop/526316.html 在Web客户端使用xmlhttp对象,可以十分方便的和服务器交换数据,我们可以获取和发送任何类型的数据,甚至二进制数 ...

  2. SpringMVC 02: SpringMVC响应get和post请求 + 5种获取前端数据的方式

    响应get和post请求 SpringMVC中使用@RequestMapping注解完成对get请求和post请求的响应 项目结构和配置文件与SpringMVC博客集中的"SpringMVC ...

  3. nodejs获取服务器数据到页面

    const Koa = require('koa'); const Router = require('koa-router'); const app = new Koa(); const route ...

  4. 十一、React 获取服务器数据: axios插件、 fetch-jsonp插件的使用

    react获取服务器APi接口的数据: react中没有提供专门的请求数据的模块.但是我们可以使用任何第三方请求数据模块实现请求数据 一.axios 获取Api数据 使用文档:https://www. ...

  5. 模拟获取post数据的方式

    使用下面两种方法可以获取post数据 .通过$HTTP_RAW_POST_DATA获取 $post=$GLOBALS['HTTP_RAW_POST_DATA']; 但需要修改相应的php.ini指令 ...

  6. IOS开发之Post 方式获取服务器数据

    //1.创建post方式的 参数字符串url +(NSString *)createPostURL:(NSMutableDictionary *)params { NSString *postStri ...

  7. AJAX 跨域请求 - JSONP获取JSON数据

    Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...

  8. AJAX 跨域请求的解决办法:使用 JSONP获取JSON数据

    由于受到浏览器的限制,ajax不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器 ...

  9. 【转】AJAX 跨域请求 - JSONP获取JSON数据

    来源:http://justcoding.iteye.com/blog/1366102/ Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流 ...

随机推荐

  1. LAMP一键安装包-CentOS 5/6下自动编译安装Apache,MySQL,PHP

    http://www.centos.bz/lamp/ 此安装包已经不再维护,请使用新版http://www.centos.bz/ezhttp/. 适用环境: 系统支持:CentOS-5 (32bit/ ...

  2. 《EnterLib PIAB深入剖析》系列博文汇总_转

    转: http://www.cnblogs.com/artech/archive/2008/08/08/1263418.html

  3. Codeforces Round #FF (Div. 2)

    又一场中国场,果然注定被虐的场... A,B:都很水,差不多模拟就好了: C题:CF难得的题意简洁, 我们可以预处理出从左到右递增的数列个数, 举个例子:1 3 2 4 5 7 L[I]       ...

  4. ASP.NET - 演练:创建网页以显示 XML 数据

    数据通常是以 XML 格式提供给 Web 应用程序的.但是,XML 数据本质上是分层的,因此您可能希望能够在基于列表的控件中使用 XML 数据,如 GridView 或 DropDownList 控件 ...

  5. MariaDB集群Galera Cluster的研究与测试

    MariaDB集群Galera Cluster的研究与测试 Galera Cluster是MariaDB的一个双活多主集群,其可以使得MariDB的所有节点保持同步,Galera为MariaDB提供了 ...

  6. Android中的SQLite使用学习

    Android中的SQLite使用学习 SQLite是非常流行的嵌入式关系型数据库,轻载, 速度快,而且是开源.在Android中,runtime提供SQLite,所以我们可以使用SQLite,而且是 ...

  7. Codeforces Round #260 (Div. 2) A~C

    题目链接 A. Laptops time limit per test:1 secondmemory limit per test:256 megabytesinput:standard inputo ...

  8. Combination Sum III

    https://leetcode.com/problems/combination-sum-iii/ Find all possible combinations of k numbers that ...

  9. HDU 5596/BestCoder Round #66 (div.2) GTW likes math 签到

    GTW likes math  Memory Limit: 131072/131072 K (Java/Others) 问题描述 某一天,GTW听了数学特级教师金龙鱼的课之后,开始做数学<从自主 ...

  10. mysql之select(一)

    select 初始准备工作: 1.建木瓜库并选中 create database mugua; use mugua; 2.创建商品表.栏目表.品牌表 create table goods ( good ...